Audio seekable 属性

什么是 seekable 属性

seekable 属性返回一个 TimeRanges 对象，该对象表示媒体资源的可寻址时间范围。TimeRanges 对象是一个包含多个时间范围的列表，每个时间范围由 start 和 end 属性组成，分别表示时间范围的开始和结束时间。

如何使用 seekable 属性

要使用 seekable 属性，首先需要获取 <audio> 元素的引用，然后通过 seekable 属性来获取可寻址时间范围。下面是一个简单的示例代码：

// www.javascriptcn.com code example
<audio id="myAudio" controls>
  <source src="audio.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

<script>
  const audio = document.getElementById('myAudio');

  audio.addEventListener('loadedmetadata', () => {
    const seekableTimeRange = audio.seekable;
    for (let i = 0; i < seekableTimeRange.length; i++) {
      console.log(`Seekable range ${i}: ${seekableTimeRange.start(i)} - ${seekableTimeRange.end(i)}`);
    }
  });
</script>

在上面的示例中，我们首先获取了 <audio> 元素的引用，并监听了 loadedmetadata 事件，当音频元数据加载完成时，我们通过 seekable 属性获取了可寻址时间范围，并打印出了每个时间范围的开始和结束时间。

注意事项

• seekable 属性返回的是一个 TimeRanges 对象，如果音频文件不支持寻址功能，seekable 属性会返回一个空的 TimeRanges 对象。
• TimeRanges 对象的 length 属性表示时间范围的数量，可以通过 start(index) 和 end(index) 方法来获取指定索引的时间范围的开始和结束时间。
• 在使用 seekable 属性时，需要确保音频元数据已经加载完成，可以通过监听 loadedmetadata 事件来确保。

通过学习和使用 seekable 属性，我们可以更好地控制音频文件的播放进度，提升用户体验。希望本文对你有所帮助！