HTML5 / Audio 定期的に再生する


あんまり利用しないケースかもだけど audio 再生で同じ音を繰り返し再生する時にちょっとした使い分けを。

まずは普通に audio 読み込み。

1
2
3
4
5
6
7
8
9
10
11
12
try {
  var audio = new Audio('');
  if (audio.canPlayType('audio/ogg') {
    audio.src = 'chime.ogg';
  } else if (audio.canPlayType('audio/mp3') {
    audio.src = 'chime.mp3';
  } else {
    throw('非対応');
  }
} catch(e) {
  alert('非対応');
}

これを例えば定期的に同じ音を再生しようと下記のようにします。

1
2
3
setInterval(function(){
  audio.play();
}, 1000);

この時、繰り返し間隔が短い場合、再生中の音が終わるまでは次の音は再生されません。
これを意図的に音を中断して、再生したい場合は下記のようにします。

1
2
3
4
setInterval(function(){
  audio.load();
  audio.play();
}, 1000);

audio.load() で初期状態にリセットされるので、また先頭からの再生になります。
audio.currentTime = 0; という方法もあるけれど、一度も再生されていない時に使用すると firefox でエラーとなるみたい。
この時、audio.mute や audio.volume はそのまま。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です