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

技術ネタ、エンタメ系のネタなどを書いていく予定です。また、技術系情報はこちらにもあります:                           「Qiita http://qiita.com/youtoy」、「SlideShare http://www.slideshare.net/yo-to/」、「GitHub: https://github.com/yo-to」

ブラウザで音を扱う: Web Audio API(※2013/12/29・30 追記あり)

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

はじめに

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

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

 

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

 Practical Web Audio API Programming

 

ステップ1: とりあえず動作させる環境を用意する(Firefoxのスクラッチパッドを利用)

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

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

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

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

とりあえずJavaScriptを記述して動作を確認したいって時はFirefoxに搭載のスクラッチパッドが断然便利 - YATのBLOG

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

 

ステップ2: シンプルな音を少しの時間だしてみる

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

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

Mac用 Firefox 25.0.1 のスクラッチパッドで音を鳴らす(矩形波、デフォルトの周波 ...

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

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

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

※2013/12/29 追記

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

ステップ3: 音の高さを変えてみる

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

Mac用 Firefox 25.0.1 のスクラッチパッドで音を鳴らす(矩形波、周波数 500H ...

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

 

ステップ4: 複数の音を連続でだしてみる

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

Mac用 Firefox 25.0.1 のスクラッチパッドで音を鳴らす(矩形波、3つの音を連続で ...

 

ステップ5: メロディを奏でてみる

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

Mac用 Firefox 25.0.1 のスクラッチパッドで音を鳴らす (矩形波、メロディを奏でる)

 

最後に

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

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

 

※ 2013/12/29 追記

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

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

Mac用 Firefox 26、Chrome 31 で音を鳴らす (メロディを奏でる〜修正版)

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