Webで音声を扱う上での基礎知識

最近仕事で音声ファイルを扱う案件があったので、色々と調べてまとめてみました。

再生できるファイルフォーマットについて

全ブラウザ、共通で再生できるフォーマットは無いのが現状です。
wavとIE用にmp3があればいいかなというかんじですかね。
（参考サイト:HTML5 Audio Codecs)

ただし、mp3は商用利用である一定以上の収入がある場合は、ライセンス料が発生するので注意が必要です。
詳しくはmp3licensingを。

audio/source要素

Webで音を扱う場合はaudioタグを使用します。

<audio src="audio.ogg" controls>
  <p>再生するには、audioタグをサポートしたブラウザが必要です。</p>
</audio>

audioタグが未対応の場合、タグ内に文章を記述すればOK。
…ですが、基本IE9以上であればaudioタグは対応しているので、今後書くことはあまりないかもです。
（参考サイト：Can I use ）

audio要素で指定できる属性

preload：音声をあらかじめ読み込む(auto,metadata.none)
autoplay：自動再生
loop：ループ再生
muted：ミュート
controls：インターフェスを表示

複数のファイルを指定する場合は、source要素で指定します。

<audio>
  <source src="audio.mp3" type="audio/mp3">
  <source src="audio.wav" type="audio/wav">
</audio>

source要素で指定できる属性

src属性：メディアファイルのURL指定
type属性：メディアファイルのMIMEタイプやコーデックを指定
media属性：どのメディア向けかを指定

iOS5以前では自動再生や複数音での同時再生ができなかったり、Android2.2以前はそもそも全然動かなかったりするとのことです…。
そのため、audioオブジェクトをJavascriptから生成し、音を再生するケースが多いように思います。
Javascriptのサンプルは色々あるのですが、下記の記事・サンプルが個人的に分かりやすかったです。
クリックすると音が鳴るボタンの作り方

再生できないときは…

サーバーによっては .htaccess側の設定が必要になります。

AddType audio/mpeg .mp3
AddType audio/ogg  .ogg .oga
AddType audio/wav  .wav

また、スマホの場合はBASIC認証をかけていると再生できないので注意が必要です。
音声ファイルのディレクトリのみ認証を解除したい場合は、解除したいディレクトリに下記のコードを記述した.htaccess をアップすればOK。

Satisfy any
order allow,deny
allow from all

停止したいときは…

スマホの場合、ホーム画面や電源ボタンを押しても音が鳴り続けるようなので、visibilityChangeイベントで停止させる必要があります。

document.addEventListener( 'visibilitychange', handleVisibilityChange, false);
function handleVisibilityChange() {
  var isHidden = document.visibilityState === 'hidden';
  if (isHidden) {
    // 音を止める処理
  }
}

Web Audio APIについて

audio要素より細かい調整をしたいときはWeb Audio APIがあります。
Web Audio APIを使用すれば、複数の音を同時に再生や、ミキシング、フィルタリングができるようになります。
ただ、IE11やAndroid標準ブラウザでは扱えないようなので注意が必要です…。

音声のスプライト化

数が多い場合は、音声をスプライト化けるすることもできます。
CSSスプライトのように複数の音声をまとめて一つの音声ファイルで指定することもできます。
音声ファイルの結合はAudio Spriteというツールで作成できるようです。

まとめ

以前、Flashで実装されていたような音声が流れるサイトを見る機会が多くなったものの、ブラウザやデバイスごとに挙動が違ったりとハマる部分が多いですね…。
今回チラッと取り上げたWeb Audio APIや音声のスプライト化についてはまだ触ったことがないのですが、機会があれば記事を書くかもです。