WebAudio

WebAudioで簡単なドラムシンセを作る

More than 1 year has passed since last update.

この記事は 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が根強く生き残ってるので使います。

作ったもの

ジャーン! ドラムシーケンサができました!
※オレンジ色なのは作者の趣味です。
image.png

以下から遊べます。
http://gyabo.sakura.ne.jp/webaudio/scdrum.html

Space : 再生
波形をクリック : ADSRがランダムに変わります
リロード : 全チャンネルのADSRがランダムに変わります

良い音で満足です。
音がイマイチ、へんてこだ!って場合はリロードお勧めです。

コードについて

自分で波形ゴリゴリ作って入れています。8chです。
が、カットオフフィルタは組み込みのを使ってます。

あとは、レガシーなところがあるのは私が慣れていないからです。すみません。
※ついぞこの間モバイルでうまく動作しないとか闇をつついてしまったので変なコードになっています。

参考にしたシンセ

ReasonというDAWにSubTractorというシンセがついています。それを参考にしました。

[Reason]
https://www.propellerheads.se/ja/reason

おまけ

もともとはちょっと前に作ってた最初はザ・アナログってのを目指してたもので、それは以下で遊べます。

http://gyabo.sakura.ne.jp/webaudio/scsndseq.html

image.png

これも良い音が鳴るようにget関数の中身を作ってみました。
皆さんもWebAudioで遊んでみてください。

レッツ WebAudio!