音声ファイルの再生位置を表示する

音声ファイルの再生位置を表示する

audio要素で音声ファイルを再生したときに、現在の再生位置と音声ファイルの再生時間を表示する方法を解説していきます。

audio要素で読み込んだ音声ファイルはプロパティから音声ファイルの情報を取得することができます。
今回は再生位置をcurrentTimeプロパティから取得し、再生時間をmaxプロパティから取得します。

サンプルページはこちら

以下の例ではp要素の中に再生位置を表示するtime要素「playback_position」、再生位置を視覚的にプログレスバーとして表示するinput要素「slider_progress」、全体の再生時間を表示するtime要素「end_position」の3要素を並べます。

プログレスバーはinput要素の「type="range"」を使って表示し、再生位置を自由に動かして設定することができます。

HTML コード例

<audio type="audio/mpeg" src="./audio/bgm01.mp3"></audio>
<button id="btn_play">再生</button>
<button id="btn_pause">一時停止</button>
<p><time id="playback_position">0:30</time><input type="range" id="progress" value="0" min="0" step="1"><time id="end_position">1:24</time></p>

JavaScript コード例

window.addEventListener('DOMContentLoaded', function(){

  const btn_play = document.getElementById("btn_play");
  const btn_pause = document.getElementById("btn_pause");
  const playback_position = document.getElementById("playback_position");
  const end_position = document.getElementById("end_position");
  const slider_progress = document.getElementById("progress");
  const audioElement = document.querySelector("audio");

  let playtimer = null;

  // 再生開始したときに実行
  const startTimer = function(){
    playtimer = setInterval(function(){
      playback_position.textContent = convertTime(audioElement.currentTime);
      slider_progress.value = Math.floor( (audioElement.currentTime / audioElement.duration) * audioElement.duration);
    }, 500);
  };

  // 停止したときに実行
  const stopTimer = function(){
    clearInterval(playtimer);
    playback_position.textContent = convertTime(audioElement.currentTime);
  };

  // 再生時間の表記を「mm:ss」に整える
  const convertTime = function(time_position) {
    
    time_position = Math.floor(time_position);
    let res = null;

    if( 60 <= time_position ) {
      res = Math.floor(time_position / 60);
      res += ":" + Math.floor(time_position % 60).toString().padStart( 2, '0');
    } else {
      res = "0:" + Math.floor(time_position % 60).toString().padStart( 2, '0');
    }

    return res;
  };

  // 音声ファイルの再生準備が整ったときに実行
  audioElement.addEventListener('loadeddata', (e)=> {
    slider_progress.max = audioElement.duration;

    playback_position.textContent = convertTime(audioElement.currentTime);
    end_position.textContent = convertTime(audioElement.duration);
  });

  // 音声ファイルが最後まで再生されたときに実行
  audioElement.addEventListener("ended", e => {
    stopTimer();
  });

  // 再生ボタンが押されたときに実行
  btn_play.addEventListener("click", e => {
    audioElement.play();
    startTimer();
  });

  // 一時停止ボタンが押されたときに実行
  btn_pause.addEventListener("click", e => {
    audioElement.pause();
    stopTimer();
  });

  // プログレスバーが操作されたときに実行（メモリを動かしているとき）
  slider_progress.addEventListener("input", e => {
    stopTimer();
    audioElement.currentTime = slider_progress.value;
  });

  // プログレスバーが操作完了したときに実行
  slider_progress.addEventListener("change", e => {
    startTimer();
  });

});

JavaScriptコードの前半はHTML要素の取得とメソッドの宣言を行います。
メソッドは再生開始したときに実行するstartTimer、一時停止や再生時間まで再生した時に実行するstopTimer、表示時間を「分:秒」のフォーマットに整えるconvertTimeの3つ用意します。

JavaScript コード例

// 再生開始したときに実行
const startTimer = function(){
  playtimer = setInterval(function(){
    playback_position.textContent = convertTime(audioElement.currentTime);
    slider_progress.value = Math.floor( (audioElement.currentTime / audioElement.duration) * audioElement.duration);
  }, 500);
};

// 停止したときに実行
const stopTimer = function(){
  clearInterval(playtimer);
  playback_position.textContent = convertTime(audioElement.currentTime);
};

// 再生時間の表記を「mm:ss」に整える
const convertTime = function(time_position) {
  
  time_position = Math.floor(time_position);
  let res = null;

  if( 60 <= time_position ) {
    res = Math.floor(time_position / 60);
    res += ":" + Math.floor(time_position % 60).toString().padStart( 2, '0');
  } else {
    res = "0:" + Math.floor(time_position % 60).toString().padStart( 2, '0');
  }

  return res;
};

startTimerではsetIntervalメソッドを起動して、500ミリ秒ごとに指定した処理を実行する設定にします。
タイマーは変数playtimerに代入して、いつでもsetIntervalメソッドを停止できるようにしておきます。

setIntervalメソッドで実行する処理は2つの再生位置の表示です。
まず1つ目は再生位置をcurrentTimeから取得し、フォーマットを整えてtime要素のplayback_positionにテキストとして挿入します。
これで現在の再生位置を時刻としてページに表示することができます。

もう1つはプログレスバーとして視覚的な再生位置を表示する処理です。
音声ファイルの全体の済生時間をdurationプロパティから取得して、先ほどのcurrentTimeプロパティを再生時間で割ることで全体の何%再生したかを計算します。
その計算結果をinput要素「type="range"」のvalue属性に設定します。

stopTimerではclearIntervalメソッドを実行して、setIntervalメソッドによる定期的な処理を停止します。
さらに、停止した時点の再生位置を表示するためにplayback_positionにテキストを挿入します。

convertTimeは整数の秒数「180」を「3:00」のように「分:秒」の形式に変換します。
if文では値が「60」以上かどうかを判定していますが、もし60未満の場合は1分未満になるので「分」の計算は省略して「00:秒」のような表示に整えます。

秒数の部分では「toString().padStart( 2, '0')」を実行して、桁数を2桁に整えます。
これは例えば秒数が「5」だったときに、頭に0をつけて「05」の表記にします。

続いて、各種ボタンが押された時に発生するイベントをイベントリスナーに登録していきます。

JavaScript コード例

// 音声ファイルの再生準備が整ったときに実行
audioElement.addEventListener('loadeddata', (e)=> {
  slider_progress.max = audioElement.duration;

  playback_position.textContent = convertTime(audioElement.currentTime);
  end_position.textContent = convertTime(audioElement.duration);
});

// 音声ファイルが最後まで再生されたときに実行
audioElement.addEventListener("ended", e => {
  stopTimer();
});

// 再生ボタンが押されたときに実行
btn_play.addEventListener("click", e => {
  audioElement.play();
  startTimer();
});

// 一時停止ボタンが押されたときに実行
btn_pause.addEventListener("click", e => {
  audioElement.pause();
  stopTimer();
});

// プログレスバーが操作されたときに実行（メモリを動かしているとき）
slider_progress.addEventListener("input", e => {
  stopTimer();
  audioElement.currentTime = slider_progress.value;
});

// プログレスバーが操作完了したときに実行
slider_progress.addEventListener("change", e => {
  startTimer();
});

最初のloadeddataでは、音楽ファイルが再生できる準備が整ったタイミングで呼び出されます。
ここでは再生準備の初期設定として、全体の再生時間をdurationプロパティから取得してプログレスバーの最大値とend_positionのテキストとして挿入します。

続くendedは再生位置が再生時間に到達し、一通りの再生が終わったときに呼び出されます。
再生が終了するのでsetIntervalメソッドによる処理を停止するためにstopTimerを実行します。

再生ボタンと一時停止ボタンは押された時に音楽ファイルの再生と一時停止をそれぞれ行います。
再生するときはstartTimerを実行し、一時停止するときはstopTimerを実行します。

最後の2つは再生位置を視覚的に表示するプログレスバーで操作があったときに発生するイベントです。
inputは操作中に随時呼び出されて、操作が完了したタイミングでchangeが呼び出されます。

プログレスバーの丸いつまみを移動している間はsetIntervalメソッドの処理を一旦停止するためにstopTimerを実行します。
また、移動している時点での再生位置をaudio要素にも随時反映するためにcurrentTimeプロパティに設定します。

プログレスバーの操作が終わったら再生を再開するため、改めてstartTimerを実行します。

以上が、上記のJavaScriptコードで実行している内容になります。

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。