【HTML】 「audio」「video」要素で指定範囲を再生する方法（区間再生）

こんにちは、さち です。

今回は、<audio> や <video> 要素を使って指定した時間の範囲（X秒～Y秒）だけを再生する方法について書いていきます。

まえおき

サンプルでは <audio> 要素を使って解説していますが、同じ方法で <video> 要素も操作できます。

両方の要素で使ってみて下さい。

【方法1】 「HTML」だけで実装

HTML だけで実装できるので記述がシンプルで実装が簡単です。

サンプル

0:10～0:15 までを再生するようにしています。

HTML

<audio src="sample.mp3#t=10,15" controls>
  このブラウザは audio タグ未対応です
</audio>

音声ファイルのソースの記述の末尾に #t=10,15 を追加することで、0:10～0:15 を再生するように指定しています。

書き方

<audio src="sample.mp3#t=開始時間,終了時間" controls>
  このブラウザは audio タグ未対応です
</audio>

src のファイル指定の末尾に #t=開始時間,終了時間 を付け加えます。時間を指定する単位は「秒」です（小数も使える）。

「終了時間」は記述を省略できます。例えば src="sample.mp3#t=10" と記述した場合、再生が 0:10 から開始されて、最後まで再生されます。

【方法2】 「JavaScript」を使って実装

JavaScript を使うため記述が少し複雑になりますが、細かく動作を制御できます。

サンプル

JavaScript を使って 0:10～0:15 までを再生するようにしています。

HTML

<audio src="sample.mp3" controls>
  このブラウザは audio タグ未対応です
</audio>

JavaScript

const audio = document.querySelector('audio');
const start = 10;// 再生の開始時間[秒]
const end = 15;// 再生の終了時間[秒]

// 再生位置を開始時間にする関数
function setStartTime() {
  audio.currentTime = start;
}

// 初回用にセット
setStartTime();

// 再生が進むと定期的にイベントが発火する
audio.addEventListener('timeupdate', function() {
  // 再生時間が終了時間を超えたら停止する
  if(audio.currentTime >= end) {
    audio.pause();// 再生を停止
    setStartTime();
  }
  // 再生時間が開始時間より前なら開始時間に移動する
  if(audio.currentTime < start) {
    setStartTime();
  }
});

やっていることとしては、開始時間に移動して再生を開始し、定期的に現在の再生時間を取得、終了時間を超えたら停止するという流れです。

<audio> 要素の currentTime プロパティには現在の再生時間が入っているので、start の値を入れることで再生の開始時間を変更しています。

さらに、addEventListener の timeupdate を使用して、再生時間が進む度にイベントを発火させています。

イベントを使って定期的に currentTime プロパティの値（現在の再生時間）を取得し、終了時間を超えたら pause() メソッドで再生を停止しています。

JavaScript によるその他の操作方法

JavaScript による他の操作についてこちらの記事で紹介しているので、参考にしてみて下さい。

HTML だけで動画，オーディオを再生するための基本知識

こんにちは、さち です。以前、「音声（オーディオ）」「動画（ビデオ）」をこのブログに設置したことがありました。かなり前の話なのでその時は Flash を使いましたが、HTML5 が普及した今、Flash なんていりません。HTML だけで設

at.sachi-web.com

2018.07.18

使用させて頂いた素材

記事内で使わせて頂いたオーディオはこちらです。ありがとうございました。

→ FM音源風BGM2【ループ対応】／作者：おとうふ 様 - ニコニ・コモンズ