Profile cover photo
Profile photo
Tomohiro IKEDA (rilakkuma3xjapan)
12 followers -
特に紹介することはない人
特に紹介することはない人

12 followers
About
Communities and Collections
View all
Posts

Post has attachment
Web Audio API フルスタックライブラリ
XSound 2.0 をリリースしました.

https://github.com/Korilakkuma/XSound

「レガシーからの脱却」をテーマにメジャーバージョンアップした XSound は,

- ES5 から ES2015 ~ へコードの書き換え
- `const, `let`
- アロー関数式
- class 構文
- ES Modules
...etc
- ESLint によるコード検証
- webpack によるビルド環境

とモダンな構成になっています.

内部が変わっただけなので, API は 1.x と変わりません.

コードのモジュール化が進んだことで, コードリーディングしやすくなり, 1.x よりも issue をたてたり, PR を送る敷居が下がったと思います.

さらに, XSound はフルスタックなライブラリですが, そこまでの機能はいらないというかた向けに, 直接ソースをインポートすれば, 必要な機能だけ利用することも可能です.

例えば, コーラスエフェクターだけが必要な場合, 以下のようなコードで実現可能です.

```JavaScript
import Chorus from './Chorus';

const context = new AudioContext();
const oscillator = context.createOscillator();
const chorus = new Chorus(context, 1024);

chorus.state(true).param({
time : 0.02,
depth : 0.05,
rate : 0.5,
mix : 0.5,
tone : 4000
});

oscillator.connect(chorus.input);
chorus.output.connect(this.context.destination);

oscillator.start(0);
```

マルチエフェクターなんだけど, コンパクトエフェクターとしても使うことが可能なソースです ( ... たとえがイマイチかな ?)

利用してみてバグなど発見されたら issue をたてたり, PR を送っていただけるとありがたいです.

以上となりますが, よろしくお願い致します.
Add a comment...

Post has attachment
学生時代 (?) 最後のポートフォリオ My Libraryを作成しました.

内容は, Webアプリや技術解説などではなく,
自分がWebの世界に入ってからの活動を
まとめた読み物的なWebサイトです.
Add a comment...

Post has attachment
Web Audio APIのライブラリ XSound.jsのAPIドキュメントのサイトが完成しました.

サンプルで利用しているオーディオは私の演奏音源ですが…
そこは目をつむって頂ければと思います…

この1月から3月まで卒業制作をしているような毎日でした.
Add a comment...

Post has attachment
<x-piano> バージョン 1.0.0リリース

Polymerを利用した実装でもほぼ同等の機能を
利用可能になったので,
これを機にバージョン1.0.0をリリースしました.

ただ, Safariではロードに若干時間を要するのと,
動的に属性が変更できないというバグがあります.
よって, Safariではあらかじめ属性値を記述しておく
必要があります.

<x-piano responsive type="sawtooth" glide="0.5"></x-piano>

こんな感じです.

この問題は今後のバージョンアップで修正していきます.

あと, http://customelements.io/ にも登録できましたので
x-pianoで検索すればヒットするかと思います
(x-pianoが未使用でよかったです…).
Add a comment...

Post has attachment
Web ComponentsのPolymerの使い方をちょこっと学んだので,
作成していた<x-piano>をPolymerで書き換えたバージョンも作成してみました. とりあえず, ピアノのイラストが出現してデザインとレスポンシブかどうかを選択できるだけですが… (Polymerを使っていない方は, フル機能ですが, ChromeとOperaでしか動作しません).

リポジトリ
https://github.com/Korilakkuma/x-piano

非Polymer (フル機能)
http://korilakkuma.github.io/x-piano/demo/import.html

Polymer
http://korilakkuma.github.io/x-piano/demo/import-polymer.html
Add a comment...

Post has attachment
Web Audio APIのライブラリを利用したアプリケーションであるX Soundのgh-pagesへの移行 & リファクタリングが完了しました.

・画像の高解像度ディスプレイ対応
・SassによるCSSのコンポーネント化
・コントローラー部分のJSをAngularJSでリファクタリング
・サーバーサイド (サウンドパッチシステム) をexpress 4.xでリファクタリング

特に, AngularJSによるリファクタリングの効果は絶大的でした.
まず,約6000行のコントローラー (jQueryの羅列 & スパゲッティコード) が, 約3000行にまでコード量が減りました.

レガシーなコントローラー (見ない方がいいかもしれないですね…)
https://gist.github.com/Korilakkuma/a9eeff1b6d3ce36360e5 

AngularJSでリファクタリングされたコントローラー
https://github.com/Korilakkuma/X-Sound/blob/gh-pages/javascripts/controller.js

去年末から今日まで毎日のようにAngularJSを書いてきたので, もはやなくてはならないものになりつつあります.

あと, サーバーサイドのexpress 4.x系への移行も何気に大変でした.
Webや書籍にある情報はほとんど, 3.x系なので…
X Sound
X Sound
korilakkuma.github.io
Add a comment...

Post has attachment

Post has attachment
ついに… Web Audio API 解説サイトのエフェクター実装の解説が完成しました.

1. イントロダクション
http://curtaincall.weblike.jp/portfolio-web-sounder/webaudioapi-effectors/introduction

2. ディレイ・リバーブ
http://curtaincall.weblike.jp/portfolio-web-sounder/webaudioapi-effectors/delay-reverb

3. コーラス・フランジャー
http://curtaincall.weblike.jp/portfolio-web-sounder/webaudioapi-effectors/chorus-flanger

4. フェイザー
http://curtaincall.weblike.jp/portfolio-web-sounder/webaudioapi-effectors/phaser

5. トレモロ・リングモジュレーター
http://curtaincall.weblike.jp/portfolio-web-sounder/webaudioapi-effectors/tremolo-ringmodulator

6. オートパン
http://curtaincall.weblike.jp/portfolio-web-sounder/webaudioapi-effectors/auto-panner

7. ディストーション
http://curtaincall.weblike.jp/portfolio-web-sounder/webaudioapi-effectors/distortion

8. イコライザー
http://curtaincall.weblike.jp/portfolio-web-sounder/webaudioapi-effectors/equalizer

9. ワウ
http://curtaincall.weblike.jp/portfolio-web-sounder/webaudioapi-effectors/wah

10. コンプレッサー
http://curtaincall.weblike.jp/portfolio-web-sounder/webaudioapi-effectors/compressor  
メジャーなエフェクターでもScriptProcessorNodeでごりごりやらないといけない系はピックアップしていません (ピッチシフター etc).

あくまでも, Web Audio APIのコンポーネントの組み合わせで
実装できる, かつ, メジャーなエフェクターというものを
ピックアップしています.

やっぱり, 大変だったのはオートパンのページでしょうか…
3D音響に関する理解がまだまだ足りなかったこともあり,
ほとんど自分の勉強のついでにできあがったような感じです.

以前に, このサイトをGoogle +の投稿してから,
結構たくさんの方に見ていただき,
また, リンクやブックマークをしていただいていたのに
進捗がよくなくて申し訳なかったです m (_ _) m

一応, このサイトを作成し始めるときに
構想していたコンテンツはすべて作成しました…
が, まだ来年の4月まで時間があるので,
Web Audio APIとデバイス連携 (WebRTC / Web MIDI API) に
ついても作成しようと思います
 (自分の勉強のついでにできあがる感じになるでしょうが…).
そのために (?), グローバルナビゲーションの部分にも
何とかスペースをつくっておきました.

ちなみに, コンテンツとは関係ありませんが,
このサイトを作成し始めるときはスマートフォンサイトを別途作成しようと考えていましたが, コンテンツがインフレ状態になっていくのを目の当たりにして…
さすがにこれは無理だと思い,
でも, できるだけ場所を問わずに見ていただきたいと考え,
レスポンシブWebデザインを取り入れました.

レスポンシブWebサイトの作成には
もっと知識と経験が自分には必要ですが,
スマートフォンやタブレットでもある程度見やすくなったかな ?
と勝手に思っています.

長くなりましたが, 今後もこのサイトをよろしくお願いいたします.
Add a comment...

Post has attachment
ピアノが好きな人のため (になるかわかりませんが…) の
Web Componentsをつくってみました.

http://korilakkuma.github.io/x-piano/

Web Components関連の技術はまだ手をつけて間もないので,
polymerとかは使っていなくてChromeとOperaでしか動作しませんが…

あとは, importした側での使い勝手がよくなるように,
今後も改良していきます.
Add a comment...

Post has attachment
Web Audio APIライブラリの録音機能を改修したものを
GitHubにあげました. 改修内容は以下の2点です.

https://github.com/Korilakkuma/XSound

1. これまでArrayインスタンスに格納していた録音データをArrayBufferViewに格納することでメモリ節約

2. 量子化ビット8bitのときにレコーディングできなかったバグの修正 (8bit のときも 16bitと同じリトルエンディアンでWAVEファイルを生成していたという凡ミスでした…)

2. はともかく, 1の改修でそこそこ長い曲でもブラウザがパンクすることなく録音できるようになりました.

デモはこちらのサイトです.

http://curtaincall.weblike.jp/portfolio-x-sound/

1.  RECボタンをClickして録音開始
2 . 適当にMMLを入力して演奏する.
3.  もう1度RECボタンをClick録音終了
4.  WAVEボタンをClickしてWAVEファイル生成します.
     完了すればリプレイされます.
5.  DLボタンをClickしてお好きな名前をつけて保存です.

ちなみに, 今日は (昨日 ?) オーディオインターフェース (Roland DUO-CAPTURE EX) を買いました. さっそく, ギターの音をWebRTCでブラウザにとりこんで, エフェクターかけて遊んでみました.

近い将来, WebRTCからの入力源もライブラリ組み込めそうです. 
Photo
Add a comment...
Wait while more posts are being loaded