24

タグと単純なJavascriptを使用して、オーディオプレーヤー用のカスタムシークバーを作成する方法を考え出すのに頭がおかしいです。

現在のコード：

    <script>
  function play() {
   document.getElementById('player').play();
  }

  function pause() {
   document.getElementById('player').pause();
  }
</script>


<audio src="sample.mp3" id="player"></audio>  
<button onClick="javascript:play()" >Play</button>
<button onClick="javascript:pause()" >Pause</button>
<progress id="seekbar"></progress>

プログレスバーをリンクして、曲を再生したときに進行状況が表示されるようにすることはできますか？

4

4 に答える 4

35

はい、audio タグのtimeupdateイベントを使用して可能です。再生位置が更新されるたびに、このイベントを受け取ります。次に、 audio 要素のcurrentTimeおよびプロパティを使用して進行状況バーを更新できます。duration

このフィドルで実際の例を見ることができます

于 2012-09-07T08:58:49.243 に答える
1

まず第一に、progress要素を使用しないでください、それはくだらない要素です（今のところ）そしてそれをスタイリングするのは大きな苦痛です...まあ、それは退屈です（私が作った小さなプロジェクトを見てください、それを見てください（そしてそれはただのウェブキットです） /moz)))。

とにかく、MDNのドキュメントを読む必要があります。非常に簡単で、多くの例があります。あなたが探しているのはcurrentTime属性です。ここに小さなスニペットがあります:

var audio = document.querySelector('#player')
audio.currentTime = 60 // will go to the 60th second

したがって、クロス乗算を使用する必要があります (divプログレス バーとして使用する要素です) div。知りたい時間
————————————————————————————————————————<br> 合計div |の長さ ビデオ/オーディオの合計時間 ( audio.seekable.end())

于 2012-09-07T08:42:56.667 に答える
0

簡単なバニラの例を次に示します。

const url = "https://upload.wikimedia.org/wikipedia/en/a/a9/Webern_-_Sehr_langsam.ogg";
const audio = new Audio(url);
const playBtn = document.querySelector("button");
const progressEl = document.querySelector('input[type="range"]');
let mouseDownOnSlider = false;

audio.addEventListener("loadeddata", () => {
  progressEl.value = 0;
});
audio.addEventListener("timeupdate", () => {
  if (!mouseDownOnSlider) {
    progressEl.value = audio.currentTime / audio.duration * 100;
  }
});
audio.addEventListener("ended", () => {
  playBtn.textContent = "▶️";
});

playBtn.addEventListener("click", () => {
  audio.paused ? audio.play() : audio.pause();
  playBtn.textContent = audio.paused ? "▶️" : "⏸️";
});

progressEl.addEventListener("change", () => {
  const pct = progressEl.value / 100;
  audio.currentTime = (audio.duration || 0) * pct;
});
progressEl.addEventListener("mousedown", () => {
  mouseDownOnSlider = true;
});
progressEl.addEventListener("mouseup", () => {
  mouseDownOnSlider = false;
});
button {
  font-size: 1.5em;
}
<button>▶️</button>
<input type="range" value="0" min="0" max="100" step="1">

アプローチは、input[type="range"]スライダーを使用して進行状況を反映し、ユーザーがトラックをシークできるようにすることです。範囲が変更されたらaudio.currentTime、スライダーをパーセントとして使用して属性を設定します (スライダーのmax属性を に合わせて調整することもできますaudio.duration)。

timeupdateもう一方の方向では、イベントの発生時にスライダーの進行状況を更新します。

1 つのまれなケースとして、ユーザーがマウスをスライダー上に置いたままスクロールすると、timeupdateイベントが発生し続け、ユーザーのカーソルがホバリングしている場所と現在のオーディオの進行状況の間で進行状況が飛び跳ねます。これを防ぐために、スライダーでブール値とmousedown/イベントを使用します。mouseup

時間を表示するこのコードの拡張については、JavaScript - HTML5 オーディオ / カスタム プレーヤーのシークバーと現在の時間も参照してください。

于 2022-01-09T05:09:09.797 に答える