ブラウザ上で簡単に音を鳴らすプログラムに挑戦。Web Audio APIで遊ぶ

YouTubeも、Soundcloudも、ブラウザ上で音を出すことができるので、ブラウザで音が出せるのは当たり前。ブログを運営している人やホームページを作ったことのある人なら、MP3やWAVなどの音楽ファイルをブラウザ上で簡単に鳴らせることもご存じだろう。でもブラウザでWeb Audio APIというものが利用でき、JavaScriptでオーディオ処理したり、合成できるのをご存知だろうか？

普通はAPIなどというものを一般ユーザーは使わないけれど、ちょっと時間があるときに遊ぶネタとしては面白そうだ。筆者自身は、JavaScriptのプログラミングもまったく分からない素人ではあるけれど、半日かけてJavaScriptの入門を読んだ上で、Web Audio APIを使ったサンプルログラムを開いてみると、なんとなく雰囲気がつかめるとともに、ちょっとだけ改変して遊ぶことはできた。このWeb Audio APIとはどんなもので、何に使えるのかなど、少しだけ覗いてみよう。

先日の記事で超小型コンピュータの「micro:bit」を取り上げたが、このとき久しぶりにプログラムの世界を体験してすごく楽しく感じた。ただ普段、プログラムなどとは縁遠い人間にとっては、新たにプログラムの勉強をしようと思っても、そう簡単にはいかないし、それなりに時間がないと厳しいのも事実。以前から、ちょっと試してみたい…と思いつつ、余裕もなくて諦めていたのだ。

ところが昨今の状況で、どの会社も半分休業状態で、取材のアポイントなどはどんどん消え、打ち合わせもメールや電話、Skypeなどで済ませることが増えたため、なんとなく時間ができるようになった。本当は進めないといけない仕事はいろいろあるし、たまりにたまった会計処理などもしなくてはならないが、外に出歩くことが減った分、心に余裕もできて、ちょっとプログラムで遊んでみようかな……と思うようになったのだ。

そこで、すぐに思い浮かんだのが、特別なツールなど用意しなくても、すぐに音で遊ぶことができるJava ScriptとWeb Audio APIの世界。大昔にBASICとアセンブラ、Cなどでプログラムをした経験はあるが、ここ20年以上無縁の状況。そんな自分にも分かるものなのか、ちょっと試してみた。

Web Audio APIで検索してすぐに見つかったのがg200kgこと新谷垣内(しんやがいと)達也氏のサイト、「g200kg Music & Software」だ。

新谷垣内達也氏のサイトg200kg Music & Software

このサイトの中に、「Web Audio API仕様(日本語訳)」と「Web Audio API解説」というチュートリアルがあり、まさに自分のための情報というか教科書的な内容があった。

Web Audio API仕様(日本語訳)

Web Audio API解説

この新谷垣内氏、8年前にこのDigital Audio Laboratoryでインタビューしたことがあり、このときにまだ登場して間もないWeb Audio APIなどについて語ってもらっていた。

これは面白そう、と「Web Audio API解説」を読みだしたが、Java Script自体の知識が皆無なので、さすがにすぐには無理。ただ、2ページ目の「とりあえず音を出す」を見てみると、「とりあえず音を出す」ためのプログラムが書かれており、そのリンクをクリックするとプログラムを実行できる。するとオシレーターを起動し、ポーっと音を出すことができたのだ。

あまりにも単純すぎるプログラムではあるけれど、原始的であるだけに、これなら自分でもできるかも……と思うとワクワクしてきた。とはいえJava Scriptがまったく分からないのでは話にならないので、Web検索してみるとJava Scriptの入門サイトがいくらでも出てくる。これらをかいつまみながら、3～4時間ほど勉強してみた。

変数の利用や関数の定義、if文やループなど、記憶の片隅にあったプログラムの世界は懐かしいものがいっぱい。とはいえ、30年以上前のプログラミング言語の知識で止まっている自分にとって、Java Scriptは高級言語過ぎて、そう簡単には理解できない。でも、Java Scriptがしっかり身に付くまで勉強するのでは、いくらたっても音=Web Audio APIの世界にはたどり着けそうにない。そこで基礎の基礎がちょっとわかったレベルで再度、g200kg Music & Softwareのページに戻り、先ほどのポーッと鳴るコードを読んでみた。

勉強してから、先ほどのコードに挑戦

やはりド初心者の身には難しすぎるけれど、新谷垣内氏の解説を読みながら眺めていくと、ちょっとずつ分かってくる。まず、Play()という関数が定義されていて、ボタンを押すと、この関数が呼び出されるのだ。そして、そのPlay()関数の定義では、いろいろな呪文が書かれているけれど、要するにオシレーターを1つ作り、それをオーディオとして出力するように接続した上で、スタート！としているようなのだ。

ここではOscilatorNodeというものが使われていたが、「Web Audio API仕様(日本語訳)」なども合わせ見ながらチェックすると、frequencyで周波数を指定したり、typeで波形が指定できるようなのだ。また、stopを使うことで、音が止められることも分かった。ただし、解説を読むとこのオシレーターは使い捨てになっていて、一度Stopで止めると再度音を出すことはできないのだとか……。

先ほどのコードでは、デフォルトの設定である440Hz=ラの音がサイン波で出る形だったので、523.251Hz=ドの音が矩形波で出るようにちょっとだけ改変してみたのが、こちら。

ドの音が矩形波で出るようにしたもの

ブラウザ上での表示

馬鹿馬鹿しいほど単純な改変だけれど、これで音が変わることに感激。気をよくして、ドミソと3つの和音を違う波形で鳴らせるようにしてみた。

ドミソと3つの和音を違う波形で鳴らせるようにした

ブラウザ上での表示

ほとんど、ただのコピー＆ペーストで並べただけだけれど、思った通りに和音が出ると嬉しいものだ。ただ、音を止めようと思っても、3つ別々の関数で定義してしまったので、どうすればいいものかと悩んで分からず、いったん断念。そのまま「Web Audio API解説」の次のページへと読み進んでいったのだ。

「オシレーターの使い方」のページでは、まさにいま試してみたオシレーターの周波数設定やタイプの設定がしっかり解説されている。そのプログラムが「オシレーターの使い方」というもの。これを実行するとHTMLでスライダーを動かせるよう書かれており、それをパラメーターとしてOscilatorNodeへと送り込んでいるのを見て、なるほどと感激。さらに、OscilatorNodeからGainNodeへと接続することで、音量調整を行なっているのも分かった。

オシレーターの設定

また同じページにはタイミング制御のプログラムも紹介されている。用意されていた「オシレーターのタイミング制御」を実行すると、ただ「プップップッ……」と音が出る。これは何？と思ったのだが、解説を読むと、あらかじめタイマーで設定した時間にオシレーターが音を出す仕組みになっており、タイミングがよれたりすることなく、鳴らせるのだという。

それならばこれでシーケンサを作ることもできるわけだが、ここでは半音ずつ音が上がっていくようにしようとプログラムをいじってみることにした。先日の「micro:bit」で使ったロジックの再利用ともいえるものだ。Java Scriptでの階乗の関数がなかったので、forループで回しながら1.0594を掛け算して半音ずつ上げていくプログラムに改良してみた。

半音ずつ音が上がっていくようにプログラムした

ブラウザ上での表示

ド初心者なので、やっていることは極めて原始的だとは思うけれど、プログラムで音が変えられるというのはやっぱり楽しい。本当に手探りで進めているから、一気に読み進めることはできないのだが、それでも仕様書を見る限り、DelayNode、DynamicsCompressorNode、ConvolverNode、IIRFilterNode……とさまざまなエフェクトとして機能するノードがあり、これらをつないでいくだけで、どんどん音を作っていくことができそうだ。

ただ、根本的にJava Scriptが分かってないのが難点であることも強く実感しているところ。これからもちょっとずつ勉強しながら、Web Audio APIを学んで、いつかはシンセサイザ的なものでも作れたらいいな…と思っているところだ。

なお、この解説ページや仕様書を公開してくれている新谷垣内氏に連絡して、読者向けにコメントをお願いしたところ、以下のメッセージをいただいた。

「Web Audio APIは現在ブラウザで実装されているv1の仕様は固定され、今は次世代のv2についての議論が進んでいる最中です。私も中の人というわけでもなくただのユーザーなんですが、仕様に関する議論はGitHubやメーリングリストでオープンに行なわれていますので、誰でも見れるし意見や要望を言うのも自由です。興味があればぜひ一度見てください」(新谷垣内氏)

なるほど、Web Audio APIはまだ発展途上ということなのかもしれないが、筆者としても、まずは現在のバージョンを少しずつでも理解して次のステップへ進んでいきたい。