HTML5 提供了 <audio> 和 <video> 标签，使得在网页中嵌入音频和视频变得更加简单。在使用这两个标签的过程中，我们可以通过 DOM 中的 played 属性来获取媒体文件已播放的部分。
什么是 played 属性？
played 属性是 <audio> 和 <video> 标签的一个只读属性，它返回一个 TimeRanges 对象，表示媒体文件已经播放的部分。TimeRanges 对象是一个包含开始时间和结束时间的集合，可以通过其 length 属性获取播放片段的数量。
如何使用 played 属性？
要获取媒体文件已播放的部分，我们可以通过以下代码来访问 played 属性：
const media = document.querySelector('audio');
const playedSegments = media.played;
for (let i = 0; i < playedSegments.length; i++) {
const start = playedSegments.start(i);
const end = playedSegments.end(i);
console.log(`播放片段 ${i + 1}: 从 ${start} 秒到 ${end} 秒`);
}在上面的示例中，我们首先获取了 <audio> 标签，然后通过 media.played 来获取已播放的片段。接着使用 for 循环遍历每个播放片段，并输出其开始时间和结束时间。
示例
下面是一个简单的示例，展示如何使用 played 属性来获取已播放的片段：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----- ---------------------------- ------------------
----- --------------- ---------------------------- -------------------
------------- ------------
-------
------
------ ---------
------- ---------------- ------------------
--------
--------
----- ----- - --------------------------------
----- -------------- - -------------
------------------------------------ -- -- -
--- ---- - - -- - - ---------------------- ---- -
----- ----- - ------------------------
----- --- - ----------------------
----------------- --- - --- - -------- -- ------ ----
-
---
---------
-------
-------在这个示例中，我们创建了一个包含音频文件的 <audio> 标签，并添加了一个事件监听器来实时输出已播放的片段信息。
结论
通过使用 HTML 的音频/视频标签以及 played 属性，我们可以轻松地获取媒体文件已播放的部分，从而实现更加灵活和定制化的播放控制。希望这篇文章能够帮助你更好地理解 played 属性的用法和作用。