音楽方丈記

HTML5 Audio と JavaScript で作られたソフトシンセ機能付きの8トラックのパターンシーケンサー Sonant Live を紹介。
HTML5 Audio、Canvas に対応した Chrome、Firefox、Safari、Opera で利用可能です。

主な特徴

　音色編集機能がついたトラッカー風のコンパクトな8トラックシーケンサーで、Windows 版 Sonant がベースになっています。

• HTML5 Audio と javaScript だけで音声処理を行っている (Flash 未使用)
• 最大8和音、8トラック・パターンシーケンサー
• 1パターン32ステップ、1トラックにつき最大10パターンまで作成可能
• トラックごとにインストルメントを指定可能
• 2 OSC、ノイズ、フィルター、LFO、エフェクト(ディレイ)付きソフトシンセ
• データの保存・読み込み可能 (元になった Windows 版 Sonant とデータ互換)
• WAV 形式でエクスポート可能
• JavaScript 版プレイヤーエンジン js-sonant で利用できるデータ生成機能

入力方法

　入力方法がちっょと独特で、先に左のシーケンサーグリッドにパターン番号を入力することで中央のパターンが切り替わります。パターンはトラックごとに保持されていて、各トラック最大10パターンまで登録できます。
　同じくシンセの音色もトラックごとに保持されるので別々の音色を割り当てることができます。



　パターンステップのノート入力は編集ボタンと鍵盤ボタン以外に、キーボードから直接入力することもできます。(下段1オクターブ目、上段2オクターブ目)

再生とデータ保存/読み込み

　再生ボタンを押したタイミングで音色とシーケンスのレンダリングが行われるので、再生が始まるまで少し時間がかかります。
　レンダリングはサーバサイドではなくユーザーのマシン上で実行され、曲の長さやブラウザの JavaScript の処理能力や PC の性能などで処理時間が変わります。

　作成したデータは、Sonant と互換性のある形式で保存・読み込みできるほかに、レンダリングした結果を WAV 形式で保存することも可能です。
　ただしレンダリングは多量のメモリが確保されてブラウザに負担がかかるため、時間がかかったり失敗する場合もあるそうです。

　また、JavaScript の変数形式で出力することもでき、JavaScript で書かれたプレイヤーエンジン js-sonant を利用すればページに組み込んで公開することも可能です。(ある程度の Web プログラミングスキル必要)

参考： Windows 版 Sonant

元になった Windows 版 Sonant はこちらからダウンロードできます。
インストール不要で、yup-sonant-public.zip を展開後 sonanttool.exe で起動します。
再生はスペースキー、停止は Enter キー、終了は ESC キーです。


JavaScript でここまでシンセらしいサウンドが出せてるのがすごい。
音色編集中にサウンドプレビューができないのがちょっと不便かも。
Sonant 用の曲データがそのまま読み込めるので、いろいろ再生してみるだけでも結構楽しめると思います。

時間があるときに前に作った HTML5 ドラムマシンの js-sonant 版を作ってみたいですね。
興味がある方はこちらも読んでみてください。↓

　» HTML5 AudioとJavaScriptで作ったドラムマシンにjsfxで音色編集機能を追加
　» JavaScriptでチップチューン風サウンドエフェクトを生成するライブラリ : jsfx
　» HTML5のAudioオブジェクトとJavaScriptで簡易ドラムマシンを作ってみた
　» JavaScriptで動的にWAVデータを生成して再生

[関連サイト]
　Sonant Live
　Sonant
　js-sonant