JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

HTMLオーディオプレーヤーの現在の再生時間（タイムスタンプ）をJavaScriptで取得・表示する方法

HTMLの <audio> 要素には、現在の再生位置を秒単位で返す currentTime プロパティが用意されています。このプロパティを利用すれば、オーディオプレーヤーの現在のタイムスタンプ（経過時間）を簡単に取得し、画面に表示することができます。

以下は、ボタンをクリックした際に currentTime の値を「分」と「秒」に変換して表示するサンプルコードです。

コード例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 20px;
        font-weight: 500;
    }
</style>
</head>
<body>
<h1>Show Current time stamp of an HTML audio player</h1>
<audio class="audio" src="sample.mp3" controls></audio>
<div style="color: green;" class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to get the audio timestamp</h3>
<script>
    let resEle = document.querySelector(".result");
    let BtnEle = document.querySelector(".Btn");
    let audioEle = document.querySelector(".audio");
    BtnEle.addEventListener("click", () => {
        resEle.innerHTML = "Minutes = " + Math.floor(audioEle.currentTime / 60) + "";
        resEle.innerHTML += "Seconds = " + Math.floor(audioEle.currentTime % 60) + "";
    });
</script>
</body>
</html>

ポイント解説

  • audio.currentTime： 現在の再生位置を秒数（浮動小数点数）として返します。読み取り専用ではなく代入も可能なため、任意の位置へのシークにも使えます。
  • Math.floor(audioEle.currentTime / 60)： 経過秒数を60で割り、小数点以下を切り捨てることで「分」を算出しています。
  • Math.floor(audioEle.currentTime % 60)： 60で割った余りを切り捨てることで、残りの「秒」を算出しています。

※ サンプルではローカルのMP3ファイルを読み込んでいます。実際に試す場合は、src 属性をお手元の音声ファイルのパスやURLに置き換えてください。

実行結果

上記のコードを実行すると、まず次のような画面が表示されます。

HTMLオーディオプレーヤーの現在の再生時間（タイムスタンプ）をJavaScriptで取得・表示する方法

音声を再生し、しばらく経ってから「CLICK HERE」ボタンをクリックすると、その時点での再生時間が「分」と「秒」で緑色のテキストとして表示されます。

HTMLオーディオプレーヤーの現在の再生時間（タイムスタンプ）をJavaScriptで取得・表示する方法

  1. Androidで現在の日時を取得する方法【SimpleDateFormatの使い方を解説】

    はじめに Oracle公式ドキュメントによると、SimpleDateFormatはロケールに依存した形で日付のフォーマット(表示)と解析(パース)を行うための具象クラスです。本記事では、このクラスを使ってAndroidアプリ内で現在の日付と時刻を取得し、画面に表示する方法を解説します。 まず、以下のようにJavaのSimpleDateFormatクラスとDateクラスをインポートします。 import java.text.SimpleDateFormat; import java.util.Date; 実装手順 ステップ1：新規プロジェクトの作成 Android Studioを起動し、「Fil

  2. HTML Webページにオーディオプレーヤーを追加する方法

    HTMLでのオーディオ再生の基本Webページに音声を埋め込むには、HTMLの<audio>要素を使用します。この要素にcontrols属性を追加すると、再生・一時停止・音量調整などができるオーディオプレーヤーがブラウザ上に表示されます。対応している音声フォーマットHTMLの<audio>要素でサポートされている主な音声フォーマットは以下の3つです。MP3（audio/mpeg）― 最も広く使われている形式で、ほぼすべてのブラウザで再生可能Wav（audio/wav）― 非圧縮の高音質形式だが、ファイルサイズが大きくなりがちOgg（audio/ogg）― オープンソースの