Web Audio playbackRate 解釋

playbackRate 屬性是 <audio> 和 <video> 元素的屬性，它允許我們更改 Web 音訊或影片播放的速度或速率。本文詳細解釋了 playbackRate。

playbackRate 基礎

讓我們從一個簡單的 playbackRate 使用示例開始

js
const audio = document.createElement("audio");
audio.setAttribute("src", "audiofile.mp3");
audio.playbackRate = 0.5;

在這裡，我們建立一個 <audio> 元素，並將它的 src 設定為我們選擇的某個檔案。接下來，我們將 playbackRate 設定為 0.5，表示正常速度的一半（playbackRate 是應用於原始速率的乘數）。

完整的示例

讓我們先建立一個 <video> 元素，並在 HTML 中設定影片和播放速率控制元件

html
<video id="myVideo" controls>
  <source
    src="http://jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v"
    type="video/mp4" />
  <source
    src="http://jplayer.org/video/webm/Big_Buck_Bunny_Trailer.webm"
    type="video/webm" />
</video>

<form>
  <input id="pbr" type="range" value="1" min="0.5" max="4" step="0.1" />
  <p>Playback Rate <span id="currentPbr">1</span></p>
</form>

然後在它上面應用一些 JavaScript

js
window.onload = () => {
  const v = document.getElementById("myVideo");
  const p = document.getElementById("pbr");
  const c = document.getElementById("currentPbr");

  p.addEventListener(
    "input",
    () => {
      c.textContent = p.value;
      v.playbackRate = p.value;
    },
    false,
  );
};

最後，我們監聽 <input> 元素觸發的 input 事件，使我們能夠對播放速率控制元件的更改做出反應。

注意：嘗試一下這個示例，並嘗試調整播放速率控制元件，以檢視效果。

defaultPlaybackRate 和 ratechange

除了 playbackRate 之外，我們還有 defaultPlaybackRate 屬性，它允許我們設定預設的播放速率：媒體重置到的播放速率；例如，如果我們更改影片源，或者（在某些瀏覽器中）當生成 ended 事件時。

所以，defaultPlaybackRate 允許我們在播放媒體之前設定播放速率，而 playbackRate 允許我們在媒體播放過程中更改它。

還有一個名為 ratechange 的事件可用，它在每次 playbackRate 更改時觸發。

注意事項

  • 大多數瀏覽器在 playbackRate 範圍為 0.5 到 4 之外時停止播放音訊，只留下影片靜音播放。對於大多數應用程式，建議將範圍限制在 0.5 到 4 之間。
  • 更改 playBackRate 時，音訊軌道的音調不會改變。
  • 大多數瀏覽器目前不支援表示媒體應反向播放的負值。

另請參閱