HTML5 音频或视频实现倍速播放

这篇文章由 DeathGhost 编辑，发布于 2019-07-13 01:04:59

我们可以通过playbackRate属性对web音频或视频进行速率控制，进而对部分用户提供辅助性选择体验。

在视频网站中我们常常会看到工具栏中有“倍速”或“倍速播放”等功能操作，进而满足部分群体需求。

当然了，这种设计属于辅助性功能体验，我们可以将其进行辅助性设计添加。

在HTML5中基于<audio>或<video>元素我们可以通过JavaScript控制playbackRate属性值对其实现功能操作。

语法：

audio|video.playbackRate=playbackspeed

示例：

See the Pen <a href="https://codepen.io/deathghost/pen/bPJPwq">HTML5 音频或视频实现倍速播放</a> by 孙志锋 (<a href="https://codepen.io/deathghost">@deathghost</a>) on <a href="https://codepen.io">CodePen</a>.

// HTML 部分：
<audio src="audio.mp3" controls id="audio"></audio>
<select id="select" onchange="changeRate()">
   <option value="1" selected>1</option>
   <option value="0.5">0.5</option>
   <option value="2">2</option>
</select>

添加<audio>元素，放置一个速率选择标签，通过changeRate变更音频或视频速率。

const audio = document.getElementById('audio');
const select = document.getElementById('select');
// change rate ...
function changeRate() {
    audio.playbackRate = select.options[select.selectedIndex].value;
}

playbackRate我们可以设置0.5（慢）、1（正常）、2（快），以变更播放速度。

<video>元素和上面的方法一样，达到音频与视频速率的变动。