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

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

Author: DeathGhost
Published: 2019-07-13 01:04:59
Category: javascript
Canonical: https://www.deathghost.cn/article/javascript/51
Keywords: HTML5, audio, video, playbackRate, JavaScript变更速率, 音频, 视频, 倍速播放, 播放, 倍速

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

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

![playbackRate 视频音频播放速率](https://www.deathghost.cn/public/upload/article/2019/07/1562952916252.jpg)

playbackRate 视频音频播放速率

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

语法：

audio|video.playbackRate=playbackspeed
示例：

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

// 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>元素和上面的方法一样，达到音频与视频速率的变动。

## Related

- Previous: [JavaScript通过onscroll实现页面顶部进度条效果](https://www.deathghost.cn/article/javascript/47)
- Next: [JS原生的深拷贝API structuredClone()](https://www.deathghost.cn/article/javascript/120)