Web 音訊 playbackRate 詳解 - Media

playbackRate 基礎知識

讓我們先來看一個 playbackRate 用法的簡短示例。

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

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

一個完整的示例

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

html

<video id="myVideo" controls loop>
  <source src="/shared-assets/videos/flower.mp4" type="video/mp4" />
  <source src="/shared-assets/videos/flower.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>

一些基本的 CSS

css

form {
  font-family: monospace;
}

video {
  width: 500px;
  aspect-ratio: 16 / 9;
}

併為其應用一些 JavaScript。

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;
});

最後，我們監聽 `<input>` 元素上的 input 事件，以便在播放速率控制元件更改時做出響應。