no-image

Web MIDI APIとWeb Audio APIを使って缶たたき音源をつくりました

JavaScript2 Advent Calendar 2018 12/22の担当記事だったりします!w

昨日: Web Music Developers Meetup #3 に参加してきました!

昨日12/21、初台のデジタルハーツさんで開催されたWeb Music Developers Meetup #3 に参加してきました。タイトルからわかる人はわかると思いますが、Web Music Developers JP 主催の勉強会です。

いつもながら、Web Audio や Web MIDIに関する発表が聞けて楽しかったです。
最近仕事の方が忙しすぎて当日デモも資料も雑に作るという、あるいみいつも通りの雑っぷりでしたが私も飛び入りでLT参加してきました。

いろいろ適当な資料

置き場

実は最近よく仕事のPoCでもWeb+センサーを組み合わせてデモつくったりするので、Chrome+MIDIという組み合わせもよく検討します。スライドに書いた通り、直結したいときは本当に便利なんですよね。

個人的にmi:muz というプロジェクトもやってて、MIDIデバイスをでっち上げる環境は何パターンか手持ちがあるんですが、やはりArduinoはセンサーのドライバとか探せば自分で書かなくてよかったりするから、時間が無い中のラピッドプロトタイピングではよく使います。

mi:muzやCanzasiも便利なんだけどねー、、、まだまだだ。という反省しながらのLTだったけど、他の人のLTも相変わらず面白かった!

昨日の様子は、発表者の一人の @dorayaki0 さんも scrapbox にまとめてくれてるので、是非みてください。

今日: 缶たたき機の音源を公開! (というブログをアドベントカレンダーで書くw)

さて、今日はよく考えたらアドベントカレンダーの担当!なんですが、これまた何も仕込んでない。連日やっつけ感が漂いますが、頑張って書こうと思います。(すでに21:00….)

もう1年も前のネタですが、缶なし缶たたき機のときに使った Web MIDIと Web Audioを使った「バーチャル缶たたいてる風音源」でも紹介してお茶を濁そうかと思います。

デモ

去年「缶なし缶たたき機」の時から数時間かけて改良しました。結果、一応「スタンドアロンでも遊べる」ようになったので、私以外に誰得かまったくわかりませんがムリヤリ公開しますw

こちら、ChromeかOperaで動作します。(iOSのChromeは動きません)

使い方

  • ロードが終わると、何かキーを押すと音が出るようになります。(最近のGoogle Chromeでは、ユーザー操作しないとWeb Audio音だしてくれなくなりました。。。悲しい。。。。)
  • 数字の[1]〜[6]のキーに、それぞれ違う「缶の音」が割り当てられています。
  • 表示されている数字は、ノートナンバーで、そのノートナンバーをMIDIで送って演奏させることもできます。

Ableton Liveの音源として使っている様子

こんな感じで DAWと連携させて音源としても使えます!

原理

アプリとしては、実際に缶たたき機を鳴らして録音したサンプル(wavファイル)をプレイバックするだけのシンプルなものなので、Web MIDIで受けて、Web Audioに流して鳴らす、というもので、いたって普通。

自作の2つのライブラリを使っています。

この程度の機能でも、独自に録音したサンプルを使えばオレオレ音源が簡単に作れるのは楽しいですね。
昔SynthEdit製の、いかにも録音したのを再生するだけのをVST化しただけの音源が結構好きでkvrで探し回ってたのが懐かしいです。JavaScriptだけで自分で作れる時代になりました。

コード

一応、index.html (JavaScript込み) を貼っておきます。

たったこれだけです!

まとめ

Web Musicは楽しいよ!