この記事は WebAudio/WebMIDI API Advent Calendar 2017 Advent Calendar 2017 の1日目です。
こんにちは。gyaboと申します。
WebAudioについて書きます。
プライベートでWebAudioを前年度から素振りしていたら
なんと実プロダクトでWebAudioを使うことになりそうです。
ヤッター！
WebAudio/WebMIDIについて
WebAudio/WebMIDIについては、トップにある通り、以下のページが詳しいです。
とても分かりやすいチュートリアルがありますので、ぜひ見るといいと思います。
Web Audio API : https://www.w3.org/TR/webaudio/
Web MIDI API : https://www.w3.org/TR/webmidi/
また前年度のアドベントカレンダーもとても参考になります。
https://qiita.com/advent-calendar/2016/webaudio
作るもの
簡単なWebAudioをリアルタイムに波形レンダリングするシーケンサを作ります。
音はアナログシンセドラムチックなものです。
もちろん単に音を鳴らすだけならいろいろな手段がありそうですが、
WebAudioを使う動機としては音がリアルタイムにレスポンシビリティに再生、波形生成できるところです。
なお、いまだにScriptProcessorが根強く生き残ってるので使います。
作ったもの
ジャーン！ ドラムシーケンサができました！
※オレンジ色なのは作者の趣味です。
以下から遊べます。
http://gyabo.sakura.ne.jp/webaudio/scdrum.html
Space : 再生 波形をクリック : ADSRがランダムに変わります リロード : 全チャンネルのADSRがランダムに変わります
良い音で満足です。
音がイマイチ、へんてこだ！って場合はリロードお勧めです。
コードについて
自分で波形ゴリゴリ作って入れています。8chです。
が、カットオフフィルタは組み込みのを使ってます。
あとは、レガシーなところがあるのは私が慣れていないからです。すみません。
※ついぞこの間モバイルでうまく動作しないとか闇をつついてしまったので変なコードになっています。
参考にしたシンセ
ReasonというDAWにSubTractorというシンセがついています。それを参考にしました。
[Reason]
https://www.propellerheads.se/ja/reason
おまけ
もともとはちょっと前に作ってた最初はザ・アナログってのを目指してたもので、それは以下で遊べます。
これも良い音が鳴るようにget関数の中身を作ってみました。
皆さんもWebAudioで遊んでみてください。
レッツ WebAudio!