Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
9
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

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

この記事は 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

おまけ

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

image.png

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

レッツ WebAudio!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
9
Help us understand the problem. What are the problem?