HTML5 のオーディオ

カテゴリ:programming

Ogg Vorbis

Ogg Vorbis は現在(2016/5月)のほとんどのブラウザ/OS (IE9, Edge, Chrome, Firefox, Safari, Opera, iOS, Android)でサポートされている. Ogg Vorbis でオーディオを提供するのが最も手間が少ない.

オーディオサポートの検証

createElement() で audio 要素を作り,canPlayType を使えば検証できる.

var audio = document.createElement("audio");
if (typeof audio.canPlayType === "function"){
  // HTML5 オーディオがサポートされている
}
else {
  // 未サポートなので対応策を実行する
}

コーディックサポートの検証

canPlayType に codec を指定する.

var canPlayOGG = audio.canPlayType("audio/ogg codecs='vorbis'");
var canPlayMP3 = audio.canPlayType("audio/mpeg");

この canPlayType の戻り値は文字列で以下のどれかである.

  • probably
  • maybe
  • 空文字列
if (canPlayOGG === "probably"){
  // おそらく OGG を再生できる
}
else if (canPlayOGG === "maybe"){
  // OGG を再生できるかもしれない
}
else{
  // OGG を再生できない
}

以下のような書き方もできる.

if (!canPlayOGG){
  // OGG を再生できないので対応策を実行する
}

オーディオのプリロード

preload 属性を指定すれば,再生する前にオーディオをロードしておける. preload に指定できる文字列は以下の3つである.

  • none
  • metadata
  • auto

none はプリロードしない. metadata はオーディオの再生時間を判断できるだけのデータのみをプリロードする. auto はオーディオをプリロードするが全部なのか一部なのかは実装依存である. またブラウザは preload 属性を無視することも許されている.

audio.preload = "auto";

再生をコントロールする

再生は play(),一時停止は pause(),停止は currentTime に 0 をセットする. ループは loop に true を設定する. 音量は volume で設定する;ただし 0 から 1 の範囲で指定する.

// ループ再生
audio.loop = true;

// 再生
audio.play();

// 一時停止
audio.pause();

// 停止
audio.pause();
audio.currentTime = 0;

// 音量を 75% に設定
audio.volume = 0.75;

// 音を消す
audio.muted = true;

サウンド提供サイト

freesound
ライセンスはクリエイティブコモンズ.

SOUNDCLICK
BGM 集.ライセンスはクリエイティブコモンズ.

そのほかクリエイティブコモンズライセンスで音楽を提供しているサイトは,Creative Commons の Content Directories にまとめられている.

関連記事

クリックすると音が鳴るボタンの作り方