buffered属性详解

最近在做一个基于微信的H5页面，其中涉及到音频播放的内容，例如播放、暂停、跳转进度条等基本功能差不多都实现了，但是想做个以前没做过的功能，在原有的功能上加个缓冲进度条，于是开始上W3C查找资料，找到这么一个属性——buffered，对其解释为：

buffered 属性返回 TimeRanges 对象。
TimeRanges 对象表示用户的音视频缓冲范围。
缓冲范围指的是已缓冲音视频的时间范围。
如果用户在音视频中跳跃播放，会得到多个缓冲范围。

这么一看，这个TimeRanges对象应该就是关键所在了，那么再看看TimeRanges对象的属性：

• length ： 获得音视频中已缓冲范围的数量
• start(index) ： 获得某个已缓冲范围的开始位置
• end(index) ： 获得某个已缓冲范围的结束位置

这样看来，我们已经可以利用现有的知识去制作缓冲条了，开始上代码：

// CSS略去...
// HTML

Loaded: %
Played: %

  
  


// JS

好啦！这样进度条就完成了，截图如下：

音频缓冲条