[ Jpn | Eng ]

Main Menu



Recent

最近の記事

Search

サイト内検索:

Archive

Powered by
MTOS 5.2.2


g200kg > Web Audio API 解説 > 01.前説

Web Audio API 解説

2016/11/14

01.前説



情報が古くなっていたので、メンテしました (2016/11/14)


最近のブラウザは音関係の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/

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


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 の正式な仕様 (現在はWorking Draft)となっています。


ブラウザの対応とWAAPISim

現在は Chrome、Firefox、Edge、Safari、Opera が WebAudio APIをサポートしています。またモバイル系でも iOS Safari、Android Browser、Chrome for Android と多くのブラウザでサポートされています。ただし、ブラウザによってはサポートするAPI仕様が古かったり、またモバイル系ブラウザではパフォーマンスの制限に加え、モバイル端末特有の制限(ユーザーのアクションがまず無いと音が出ないとか)もありますので、注意が必要です。今のところ実装として最も進んでいるのは Chrome ですので取りあえず、色々試してみたいという場合は Chrome をリファレンスにするのが良いかと思います。

Web Audio API - Can I Use

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

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

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

一応ここにリンクだけは残しておきます。

WAAPISim の使い方

「waapisim.js」と「waapisim.swf」の2つのファイルを配置して読み込めばWeb Audio APIの機能が使えるようになります。次の1行をHTMLに追加してください。

<script type="text/javascript" src="waapisim.js"/></script>
WAAPISimのページ
waapisim.js
waapisim.swf




g200kg