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 事件，以便在播放速率控件更改时做出响应。