HTML5のaudio要素でJavascriptから再生範囲を指定して音声再生する方法

特殊なやり方だったので備忘録としてメモしておきます。

やりたいこと

sample.mp3のようなひとつの音声ファイルの指定範囲のみを再生することで、複数の音声ファイルを用意せず、アプリ内で使う音声をひとつの音声ファイルで管理したいと考えました。(CSSスプライトの音声版みたいな)

音声ファイルはサムネイルなどのファイル情報から内容を特定するのが難しいのがネックなので、こうすることで複数の音声ファイルを用意せずに管理が容易になります。

コード

まず最初に結論として上記を実現するコードを。

var audio = new Audio();
//sample.mp3の1.5秒~5.8秒まで再生する
audio.src = 'http://xov.jp/test/sample.mp3#t=1.5,5.8';
audio.play();

Audioオブジェクトの.srcプロパティに指定する音声ファイルに「#t=」を付け、その後に開始位置と終了位置を指定します。

この「#t=」以降は上でご紹介した書き方以外のバリエーションもあります。

//10秒から20秒まで再生
audio.src = 'http://xov.jp/test/sample.mp3#t=10,20';

//1時間30分から2時間まで再生
audio.src = 'http://xov.jp/test/sample.mp3#t=,01:30:00,02:00:00';

調べてみたのですがミリ秒単位での指定は最初の例以外はできないみたいなので、普段はそちらを使っておけば問題はないかと思います。

当初はcurrentTimeなどのシークに使えそうなそれっぽいプロパティがいくつか用意されていたのでそれらをいじっていたのですができなくて、なんでかな~と思ったらこんな方法でした。

ページの先頭へ