2012年12月1日土曜日

FM シンセサイザー by HTML5 Web Audio API

Web Music Developers JPのアドベントカレンダーの初日(12月1日)の記事です!
※当初は基礎になる「A-D変換」について書く予定だったけど、がんばって開発系のネタを作りました!

ネタはHTML5のWeb Audio APIを使って「FMシンセサイザー」です。
Chrome(ウェブブラウザ)でしか動作しません。。。

WebAudioAPIを使ったシンセサイザーといえば@aike1000さんのWebSynth@g200kgさんのWebModular(HTML5 モジュラーシンセサイザー)のアナログシンセサイザーが大変有名ですが、今回僕が作成したのはFMシンセサイザーです。1980年代のシンセサイザーサウンドを牽引したヤマハのDX7のWebAudioAPI版です。なんですが、まだまだなのでVer 0.1ですf(^-^;)

[音色に関して]

6個をプリセットしています。ですがブラウザ上からは波形の作成・編集はできません。(プリセットは js/presetParam.js にテキストで書込んでいますので、それを変更・追加することで可能です、、、)
アルゴリズムは直列、最大3オペレータ+1キャリアで構成しています。

[WebAudioでのFM(変調)に関して]
AudioContext.Oscillatorを使ってて、次のオペレータまたはキャリアのfrequencyへconnectすることで変調を行っています。

[課題]
プリセットの数にしても、音源の変調部分に関しても課題はたくさんあるので、今後強化していく予定です。

[本質じゃない!]
1文字40ドットのLCDディスプレイ、作った本人ですがかなり気に入っていますw 技術的にはCanvasを使って表現しています。右から左へ流れる、とか、下から上へ流れる、とかも実装していきたいな〜、と思っています。
自分で言うのもアレですが、起動時の「HTML5のロゴ」とかカッコイイですww

次回のアドベントカレンダーで使い方をご紹介させていただければと思います!

[ソースコード]
https://github.com/ryoyakawai/webaudiofmsynth


※ 多大な影響は受けておりますが、個人的な記事、アプリケーションであって私の雇用者には一切の関係はありません。