ブラウザで音を扱う： Web Audio API（※2013/12/29・30 追記あり）

この記事は HTML5 Advent Calendar 2013 - Adventar の8日目の記事になります。

先日、 HTML5 Conference 2013 に参加してきました。

面白く勉強になる話がたくさんあったのですが、その中で、今まで気になりつつも手をだしてなかったオーディオ周りの話をとりあげてみようと思います。

まず、参考にさせていただく資料は先日のカンファレンスで発表のあった Web Audio API に関する下記のものです。

「ちょっと試してみたいな」というだけなのに html や Javascript のファイルを準備して、というのが面倒なので「気軽に試す方法はないか」と思い（そしてご覧いただいている皆さまがすぐに試せるように）、これまた先日のカンファレンスで見かけたネタを使おうと思います。

そのネタを見たのはこちらの真面目なアニメーション (html5j 2013, Web Animations) というセッションのデモでした。

さて、使うのはFirefoxに標準で付属しているScratchpad（スクラッチパッド）です。

使い方は以下の記事などをご覧いただくのが分かりやすいかと思います。

以後、このスクラッチパッドにソースコードを貼り付けて、実行してみます。

では実際に資料の26ページ目を参照しつつソースコードを書いてみます。

下記のソースコードをスクラッチパッドに貼り付けて実行してみました（※注：少しの間、音がでます！）。

参照した資料との相違点があり、具体的には下記が異なります。

1行目： Mac用 Firefox 25 で動作させるために、ベンダープレフィックスを削除して webkitAudioContext → AudioContext としました（資料の44ページに記載されている話です）。
9行目：元のソースコードは音を鳴らし続ける処理であったため、少ししてから音を停止させるための処理を1行追加しました。

上記を試してみると、わずかな時間、音が鳴りました。

※2013/12/29 追記

タイプ指定を文字で行う必要があるようで、3行目を「osc.type = 1;」としていたのを「osc.type = square;」と修正しました（これ以降のソースコードも同様です）。

次に音の高さを変えてみます。先ほどのソースコードに周波数を変更する行（下記の4行目）を加えてみました。

先ほどより、音の高さが低くなりました。

異なる高さの3つの音を連続でだしてみます。

最後に上記で試したことをもとに、自分が指定したメロディを演奏するものを作ってみます。

初めて Web Audio API に実際に触れてみて、やってみたいことがさらに色々でてきました。

まだ、音源となるファイルを使った処理や、マイク入力を利用したものなど、面白そうなものが試せてないので、少しずつ試していきたいと思います。

その後、Webの情報を見ていて「start/stopを大量にセットしておくのは良くない」という話があったため、一定数（サンプルでは4つ）の予約を一定時間ごとに繰り返す、という処理に変更してみました。

これがベストなのかは不明ですが・・・。

修正版は、スクラッチパッド上で動かすためのコードではなく、FirefoxとChromeで動作するHTMLファイルにしてみました。

技術とエンタメと、その他・・・