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 时，音频轨道的音调不会改变。
  • 大多数浏览器目前不支持表示媒体应反向播放的负值。

另请参阅