Web Audio でシンセを作った話
どうもー
最近は暑くて死にそうです。
高山に行ったんですけど、22℃とかでくそ涼しかったです。
www.instagram.com www.instagram.com www.instagram.com www.instagram.com www.instagram.com
小京都だぞ！という感じがありノスタルジーに浸れたり、山の方に行けば綺麗で景色も見れて最高に涼しくて、最高に最高でした。
そんな気持ちになりました。
はい。
高山には海の日あたりに学生時代の後輩氏達と行ったのですが、ただ遊びに行ったわけじゃなくて、開発合宿しようぜ〜とのことだったので、前々からちょっとやりたかった、 WebAudioをつかってシンセをつくるぞ〜⤴という気持ちを強く持ちながら、結構な時間を観光を楽しんだのでその進捗のNASAを書きます！！！！
Web Audio?
Web Audio API が正しいかな。
詳しくはこちらをどうぞ Web Audio API。
まぁざっくりウェッブで音を扱うAPIですね。
音をだすだけじゃなくて、入力とかも扱うことができます。
でまぁもうこれをつかってシンセとかいくらでも作られているんですけど、まぁ作りたかったんです。
ロマンです。ロマン。
成果物〜
ネーミングセンスがないので、「FXで有り金全部溶かす人の顔」みたいな顔をしながら 「synse」という名前のパッケージをつくりました。
READMEはまだ無い。
でこれを使ったexampleがこちら
GitHub Pageで見れるようにしてるので良い感じにアクセスするか、 下のiframe内をご確認くだされ〜。
キーボードのa w s e d f t g y h j kをおすことで音がなります。
一応鍵盤通り？な配置で１オクターブが良い感じになるようになってるはずです。
同時に押してもオシレーターが一個しか無いので、単音しかなりません。
和音を鳴らしたいときは、後述するけどがんばれ。
他のいろいろな input は色々いじってもらうとアナログシンセみたいな感じに音が変わるかと思います。
設計思想とか？
そんなたいそれたものではないけど…
一応、あくまで一応、アナログシンセをイメージして作りました。
vco vcf vca とかをモジュールとして提供する感じにしています。
なので、vcoをそのままspeakerにつなぐこともできるし、vco -> vcf -> speakerのようにvcaを飛ばしたりとかもできるようになってる。
今は無いけど、もうちょっとしたらmixer?というか
vco -> mixer -> vcf .... vco ->
まぁmixerかな…。なんだろ…。
みたいに感じにn個の音源を混ぜるみたいなのも作ろうと思ってる。
実装的な話
Flow type とか Type Scriptとかを使って型がほしかったけど、開発合宿で２日くらいしかないし、まぁ後にしよーと思って結構ツライなぁとなってた。素直に入れればよかったけど、webpackとかで苦しんでいたので、そんな余裕はなかった。
そのうち Flow typeをいれたいなぁと思っている。
で、vcoとかはAudioNodeっていうクラスを継承させて作っていて、そこで他のAudioNodeとつなげるところは共通化させている。
vcaだけはちょっと特殊で、時間が経過するに連れて音を大きくしたり、小さくしたりみたいなのがあったので、どうしようか迷いに迷って、setTimeOutを使うようになっている。
よくないなぁ…と思いつつ、web上でのkeydownとかのイベントの発火が押しっぱなしだとワンテンポ遅れたりして、音が急にでかくなったり、いきなり消えたりしてわけわからんくなってしまったので、ダサいけどそうなっている。
今でも微妙なときがあるのでカイゼンの余地がある。
またsynseで提供している、keyboardは単音？1音？しか出せないようになってます。和音は出せません。
なぜならアナログシンセを設計思想においているからです。
和音を出したいときは、ナウいシンセのように複数個オシレーターを準備してやればいいかなと思ってます。*1
まぁvcoをn個用意してやればいいですね。
そのうちmixerができるから良い感じにつなげれば完成ですよ〜和音でますよ〜。
ちょっと話がそれましたね。
またkeyboardの実装もだいぶ汚いものになっています。
こちらもvcaと同様にsetTimeOutがあります。理由はvcaと同様です。辛かったし今もツライ。
そんな感じかなー。
色々もやっとしてるところはあるので、良い感じにしていきたいにゃーって思ってます。
あーあとテストとかも一切ないのでうーんってなってるけど、 これどうやってテストするんだ…ってなってる。 音が鳴るとか、ね。*2
まとめ
- 高山はめっちゃ良いところだった。
- web audio api 奥が深い。
- つらいこともありますが、たのしかったです。
はいー
まぁそんなに使うタイミング無いかもしれないですけど、こういうのやっぱりおもしろいなぁーと思いましたまる。
そんなかんじで、ここまで。
またねー。じゃあねー。
