2-3. 音声の再生方法

HTML5ではJavaScriptからの指令で音声ファイルを再生できる

samplejpg

HTML5を使うとJavaScriptで音声ファイルを再生できるようになります。 しかし、JavaScriptで再生できるのはHTML文書内のaudio要素で定義されたファイルだけです。

このため、JavaScriptを使って音声ファイルの再生を行いたい場合には、まず、HTML文書にaudio要素を定義する必要があります。 ただし、この文章を書いている2011年1月の時点では、主要ブラウザの全てでサポートされる音声ファイルのフォーマットは存在しません。 このため、audio要素では複数のフォーマットで音声ファイルを登録しておく必要があります。

HTML文書へのaudio要素の記述方法については既に説明しましたので、本節では音声再生関連のJavaScript側の処理について説明して行きます。

まず、audio要素を検出する

audio1 = document.getElementById('id_audio1');

上記のコードでは以前に示したHTML文書のサンプル内にあるaudio要素を検出します。 音声再生に関する各種操作は上記で検出されるaudio1に対して直接行えます。 このため、canvasとは違ってコンテキストの取得等は必要ありません。

なお、audio要素はDOMの機能を使ってJavaScript内で生成することも出来ます。 ただし、2011年1月の時点では、IE9はまだβ版ですが、audio要素の生成に対応していません。

音声を再生/停止する

audio1.play();
audio1.pause();

上記のコードでは音声を再生した後、すぐに停止しています。 playメソッドでは現在の再生位置から再生が始まります。 このため、最初のplayメソッドでは音声ファイルの最初から再生が行われますが、次のplayメソッドでは音声ファイルの途中から再生が継続されます。

pauseメソッドは音声の再生を停止します。 停止にあたって現在の再生位置が変化することはありません。 このため、上記のコードの後で再度playメソッドを使用すると、停止した時点の再生位置から次の再生が行われます。

プロパティを指定してから再生する

audio1.currentTime = audio1.duration/2;
audio1.volume = 0.5;
audio1.play();

上記のコードでは音声の再生時に開始位置とボリュームを指定しています。 currentTimeプロパティで指定するのは再生を開始する位置の先頭からの秒数です。 durationプロパティで読み出せるのは音声ファイルの秒数です。 このため、上記では音声ファイルの中ほどから再生が開始されます。

volumeプロパティで指定するのは最大音量を1.0とした場合の再生音量の比率です。 このため、上記では再生時の音量は音声ファイルに記録されたデータよりも小さくなります。

音声ファイルをループ再生する

audio1.addEventListener('ended', function(){audio1.play()}, false);  
audio1.play();

上記のコードでは再生終了イベントの処理関数を登録してから再生を開始しています。 このため、音声ファイルの再生が終了すると登録した関数が実行されます。

登録している関数では、再度音声ファイルの再生を開始していますので、結局、ループ再生が行われることになります。

異なるフォーマットで再生してみる

audio要素に登録できる音声フォーマットには、wav/mp3/aac/ogg等がありますが、2011年1月時点での主要ブラウザの対応状況は以下のようになっています。

ブラウザ     wav  mp3  aac  ogg  m4a
Firefox 3.6  ○   ×   ×   ○   ×
Chrome 9     ○   ○   ○   ○   ○  
Safari 5     ○   ○   ○   ×   ○
Opera 11     ○   ×   ×   ○   ×
IE9RC版      ×   ○   ×   ×   ○

上記を見れば判りますが、2011年2月の時点では、主要ブラウザの全てで再生が可能なフォーマットは存在しません。

wav形式は多くのブラウザでサポートされますが、非圧縮形式になりますので、ファイルサイズが大きくなりがちです。 また、mp3形式はサーバーにデータをアップして有料配布するだけで特許料の支払いを求められる可能性があります。

m4a(mp4)形式については、やはり特許が存在し、エンコーダ/デコーダの配布には特許料の支払いが必要となります。 このため、フリーなオープンソース系ブラウザでは今後ともサポートされない可能性が高いですが、 2011年2月の時点では、データの配布に特許料の支払いが求められる事は無いようです。 このため、一般ユーザーがデータをアップロードする場合には、mp3よりは使い勝手の良いフォーマットになります。

ogg形式については、特許料の支払いは必要ありません。このため、フリーなオープンソース系ブラウザの主要フォーマットになっています。 しかし、メーカー系の後押しのあるaac形式がメジャー化しているのに対し、ogg形式はマイナーな存在です。 このため、サーバーにデータをアップロードしても、MIME対応等の関係から問題が発生して対処が必要になる場合があります。

上記のような状況ですので、2011年2月時点では、若干の難点はあるものの、主要ブラウザの全てで音声出力させたい場合には、フォーマットにはm4aとoggを併用するのが現実解となります。 それらを使って音声を再生するサンプルページを作成してみましたので、動作させてみて下さい。

サンプルページを見る

2011年2月11日にIE9のRC版が公開され、β版でサポートされていたaac形式が非サポートになりました。 このため、2011年2月11日の時点で当初使用していたaac形式の使用を取りやめ、代わりにm4a形式を使用するように変更しました。 m4a形式はデータ的にはaac形式と同一のため、通常はaacファイルの拡張子を変更するだけで作成できます。

複数の音声ファイルを同時に再生する

audio要素に登録した音声ファイルをどれだけ同時に再生できるかは、ブラウザに依存しますが、主要なブラウザでは2,3個程度であれば問題は無いようです。

このため、audio要素には左右音声のバランス調整用のメソッドは用意されていませんが、2音の同時再生とそれぞれのボリュームプロパティを使って擬似的なステレオ音声のバランス調整も可能です。

音声ファイルの左右チャネルを個別に切り出し、それぞれを別ファイルとしてaudio要素に登録し、個別/両方の同時再生を行わせるサンプルページを作成してみましたので、動作させてみて下さい。

このサンプルでは、左右の音声がほぼ同時に再生されるように、音声ファイルのプリフェッチ/再生開始位置の指定も行っています。

2011年2月時点では、Chromeを除く主要ブラウザ(IE9RC/Firefox/Safari/Opera)では問題なく動作します。 Chromeを使った場合には、左右の再生音が少しずれます。 現時点では、Chromeの音声再生機能は全般的に他の主要ブラウザと比較すると不安定です。

サンプルページを見る