音楽方丈記

先月末に作った HTML5 Audio オブジェクトと JavaScript で作った簡易ドラムマシン の音源部に、JavaScript で波形を生成して再生できるサウンドエフェクト・ライブラリ jsfx を組み込んでメモリ上で音声データを生成・編集できるようにしてみました。

　↓テストページはこちら
　HTML5 AudioとJavaScriptで作った簡易ドラムマシン (jsfx バージョン)




　HTML5 の Audio オブジェクトが実装されていて、WAV 形式の再生が可能なブラウザ(Firefox 3.6、Chorme 9、Safari 5 など)で実行可能です。
　快適に遊びたい人は Windows/OS X 双方とも Firefox 3.6 以上を推奨します。

　IE 6～8 は HTML5 非対応なので動きません。
　IE 9 beta は HTML5 の Audio タグは使えますが、Audio オブジェクトが生成できないので動きません。

テスト結果

BPM 120、パターンは初期表示でセットしているパターンでテストしました。

OS	ブラウザ	結果	備考
Windows 　(7/XP)	Firefox 3.6	○	ほぼ問題なし？
	Chrome 9.0	△	間引きあり。テンポ落としたらOK？
	Safari 5.0	△	起動が重い。GATEモードなら再生OK
	IE9 beta	×	Audio オブジェクト生成できず
OS X 　(10.6.4)	Firefox 3.6	○	ほぼ問題なし？
	Chorme 9.0	×	ひどい音割れ発生 (原因未調査)
	Safari 5.0	○	ほぼ問題なし？
iOS 4.2 　(iPad)	Safari	×	音がでない (原因未調査)

　Chrome は 9 から WAV 形式の再生に対応していたので大丈夫かと思っていたら、OS X 版は波形生成の段階で何か問題が起こっていて波形がつぶれているのか、デジタルノイズのような音割れが発生して動きませんでした。
　Windows 版のほうはテンポを落とせばなんとかギリギリ動いてくれました。

　iOS 4.2 (iPad) では、再生ボタンを押すとインジケーターが淡々と動くだけで、音がまったく出ませんでした。iPad の画面右上に出てくるはずの再生アイコン(►)がでてなかったので、再生自体がキャンセルされているようでした。

　どちらのブラウザもファイル経由の WAV 形式の再生には対応しているのですが、メモリ上に生成した WAV 形式のデータを直接 Audio() に渡すのは問題があるのかもしれません。

使用方法

　パネル上部にあるタブで16ステップシーケンサーの画面と、5つのパートの音色編集画面の切り替えができます。


　シーケンサーの部分は前作のメイン画面とほぼ同じです。今回はハイハットの役目以外にも使用できるようにオープン/クローズドの排他処理は外しました。
　今回新たに単独で鳴らせるパッドボタンを追加しました。マウスでクリックするか、Z X C V B のキーで発音します。

　音色編集画面のパラメータは jsfx と同じ構成で並び順も同じにしてあります。普通のアナログシンセと若干構成が違うので最初はちょっと取っ付きにくいかもしれません。
　波形選択はラジオボタン、その他のパラメータはスライダーで調整できます。スライダーの微調整をしたいときは、スライダーをクリックしてフォーカスを与えた後に左右矢印キーで動かせます。


　編集画面の下にある機能ボタンは以下の6つで、マウスクリックとキーで操作できます。
　操作は全てパート単位で行います。
　音色を編集しても「Apply」ボタンを押さないとドラムセットには反映されません。

• Apply :　編集中の音色ドラムパートにセットします
• Play :　編集中の音色をテスト再生します
• Random :　ランダムにパラメータの値を設定して音色を作成します
• Clear :　プリセットの音色に戻します
• Load:　クッキーから音色パラメータをロードします
• Save:　クッキーに音色パラメータをセーブします

　クッキーに保存した音色は次回起動時に自動的にロードされます。
　プリセットに戻したい場合はパートごとに「Clear」ボタンを押してください。

　パラメータのスライダーはダブルクリックするとデフォルト値に戻ります。
　(プリセット音色の位置ではなく、jsfx がもつ初期値に戻ります)

音源は jsfx を使ってメモリ上に生成して合成

　jsfx は音色パラメータから音声波形を生成したものを WAV 形式に変換して HTML5 の Audio オブジェクトにオンメモリで割り当てることができるサウンドエフェクト・ライブラリです。

　↓関連記事はこちら
　» JavaScript でチップチューン風サウンドエフェクトを生成するライブラリ : jsfx
　
　前作はステップごとの発音回数の負担を減らすために、1ステップ内で発音するパート数(例えばドラム、スネアが同時に鳴っていたら2回)の play() を呼ぶのではなく、あらかじめ全てのパターンを合成した音声ファイルを用意して、1ステップで1回だけ呼ぶ方法を使っていました。

　今回は音声ファイルは使ってませんが考え方は同じで、あらかじめパートの全ての組み合わせの波形をメモリ上で合成して Audio オブジェクトを生成しています。

1. 5つのパートの音色パラメータを元に音声に変換
   → jsfx の jsfx.generate() を利用
2. すべてのパートの組み合わせ(31パターン)の音声波形を合成
   → ここは自前で処理 (各パートをフレーム毎に足し算してるだけの簡単なもの)
3. 音声データを WAV 形式に変換して Audio オブジェクトを生成
   → jsfx の audio.make() を利用

今回、シンセエンジンは jsfx の助けを借りたので比較的短時間で作ることができました。
JavaScript で音が扱えるのはすごく楽しいですね。

いつか自前で全部実装してみたいと思ってたりしますが、今の時点ではまだ勉強不足なので実現するのはもう少し先のことになりそうです。


[関連サイト]
　jsfx - Javascript Sound Effect Generator
　HTML5 - W3C Editor's Draft - Audio Element
　jQuery UI

---