sink.jsが面白い HTML5で音響合成

5年程前にブラウザ上で音響合成をする方法を模索していて、当時はレイテンシや負荷の問題を解決できず断念してしまったのですが、最近Web Audio APIがアツいという話を耳にして、早速試してみました。その中でもsink.jsを使うと、かなり簡単にブラウザ上での音響合成を楽しめます。まさに夢がひろがりんぐ。

Web Audio APIとは

Web Audio APIは音楽アプリケーションをJavaScript上で作るためのAPIです。2010年にW3Cによって提唱されていて、最新版のChromeや開発版のSafariで既に利用可能になっています。まあ、とにかくこれを使うとブラウザ上で音楽アプリケーション(シンセサイザーとか)を作れる、というわけです。

sink.jsとは

Web Audio APIを直接叩いて音響合成プログラミングをしてもいいのですが、手っ取り早くその面白さを理解するには、ライブラリを使うのが一番です。音響合成をする上で最低限必要な部分のコードを書くだけで済み、色々細かい手順や設定に頭を悩ませる必要がなくなります。
Web Audio APIの呼び出しを簡易化するライブラリはいくつかありますが、シンプルで美しいsink.jsを使いましょう。

sink.jsの入手

sink.jsはGitHub上で公開されています。実装はいくつかのjsファイルに分かれていますが、makeすると一つのjsファイル(sink.js)になります(ただ連結させてるだけっぽい)。

ソースコードのダウンロード

ソースコードをダウンロードしてきましょう。GitHubのページからzipでダウンロードしてきてもいいし、cloneするのもよいでしょう。

git clone https://github.com/jussi-kalliokoski/sink.js.git

sink.jsを作る

レポジトリにはsink.jsファイルが含まれていない代わりに、ソースコードとテスト、ビルド(といってもソースコードの連結をするだけ)が含まれています。ターミナルから

make

コマンドを実行するとsink.jsファイルができます。

sink.jsを使う

sink.jsの読み込み

一般的なjsファイル同様、sink.jsを使いたいページのヘッダ内でscriptタグで読み込んでやります。

<script src="sink.js"></script>

ホワイトノイズ

Readmeに書いてある、ホワイトノイズを出す例を実際に作ってみましょう。(ページをロードすると突然音がでるので注意してください)

<html>
 <head>
 <title>sink.js test</title>
 <script src="sink.js"></script>
 <script>
 var sink = Sink(function(buffer, channelCount){
  var i;
  for (i=0; i<buffer.length; i++){
   buffer[i] = Math.random() - 0.5;
  }
 });
 </script>
 </head>
 <body>
 Hello sink.js.
 </body>
</html>

※わかりやすさ重視で、スタート／ストップやスクリプトの読み込み／初期化のタイミングは考慮していません。実際にアプリケーションを作る場合は、ページの全要素の用意ができてからSinkオブジェクトを作って、かつオン／オフの機能を作るべきです。
実にシンプルです。やっていることはただ、音声バッファを埋めるためのコールバックを書いているだけ。ちなみに、サンプリングレートやチャンネル数を変更したい場合は引数で変更できます。

まとめ

sink.jsを使うと、かなり手早くブラウザ上で音響合成ができます。DSPの経験がある人は、これだけで難なくブラウザ上でのサウンドアプリケーションの開発をスタートできるでしょう。
sink.jsの魅力はただ短くかけるだけではないのですが、また次の記事以降で実際にいじりながら見ていきましょう。

参考リンク

Pocket