最近の記事

関連記事

01.前説

情報が古くなっていたので、メンテしました (2019/01/19)

最近のブラウザは音関係のAPIも準備されてきてシンセだって作れるんですよ! って言う話が始まってからもう何年経ちましたかね? まあ最近は WebAudio API もそれなりに認知されてきました。Chrome / Firefox / Edge と主要なブラウザでも基本的なサポートがされるようになりましたし、キワモノ感も薄れて普通に使える API になりつつあるんじゃないでしょうか。

とはいえ、音関係のプログラミングをする人の絶対人口は多いとは言えなくて、それをブラウザ上でやってみようなんて言う人は更に少ないのは相変わらずですが。

という事で、一部ディープなWeb Audio APIの入門的解説でも書いてみます。

Web Audio API の完全な仕様はここにあります：http://www.w3.org/TR/webaudio/
また、仕様書の日本語訳を用意しました：http://g200kg.github.io/web-audio-api-ja/

仕様全体の網羅的な説明としては上の仕様書をご覧ください。この解説ではチュートリアル的に使い方のポイントを説明してゆきます。

• 01.前説
• 02.とりあえず音を出す
• 03.オシレーターの使い方
• 04.ノードの接続
• 05.ノードのライフタイム
• 06.バッファソースでワンショットサンプルから音を出す
• 07.パラメーターとオートメーション
• 08.a-rateパラメーターとk-rateパラメーター
• 09.スクリプトプロセッサーの使い方
• 10.フィルターの使い方
• 11.オシレーターのカスタム波形
• 12.アナライザーの使い方
• 13.ディレイの使い方
• 14.ウェイブシェイパーの使い方
• 15.コンプレッサーの使い方
• 16.コンボルバーの使い方
• 17.パンナーの使い方
• 18.各ノードのパラメータ一覧

Web Audio API

ブラウザで音を扱う手段としては、プラグインを利用してJavaやFlash経由で音を出す方法は昔からありましたが、HTML5の流行とともにブラウザが直接音を扱えるようにしようとして、Firefoxの「Audio Data API」とChromeの「Web Audio API」が提案されました。

Audio Data API はローレベルでシンプル、Web Audio API はハイレベルで多機能で規模が大きい、という感じのAPIでまったくの別物だったのですが、現在は Audio Data API は破棄され、WebAudio API が W3C の正式な仕様 (現在はCR ( Candidate Recommendation ))となっています。

ブラウザの対応

現在は Chrome、Firefox、Edge、Safari、Opera が WebAudio APIをサポートしています。またモバイル系でも iOS Safari、Android Browser、Chrome for Android と多くのブラウザでサポートされています。

ただし、Web Audio API は仕様としては、現在 V1 と呼ばれるバージョンがほぼ確定していますが、ブラウザの対応はまだそれに完全に準拠していません。この解説ではブラウザは Chrome または Firefox を使用する事を前提としています。

それ以外のブラウザの場合次のような点に注意してください。

• 後で新しく追加されたり、機能が変更されたノードをサポートしているか
• Edge では現在ノードの生成にコンストラクタが使えない
• Safari では現在 AudioContext に webkit プリフィックスが付いたままである

ブラウザのWeb Audio APIへの対応状況を表示するページを作りました。アクセスしているブラウザのWeb Audio APIへの対応状況を表示します。Web Audio API Checker

さて、そして今まで WAAPISimという WebAudio API の polyfill を作ってはいたのですが、主要なブラウザがネイティブに WebAudio API をサポートしている現在、そろそろ役目を終えて良いのかな、と思っています。

今現在、polyfillが必要とすると MSIE 向けというのが主な目的になってしまうのですが、それなりの規模のアプリを作ろうとした時に、WebAudio API だけの問題ではなくその周辺として必要な機能が色々と足りなくて、苦労に見合う結果を得るのは難しいと思います。

<script type="text/javascript" src="waapisim.js"/></script>