js实现播放进度条

以下是JS实现播放进度条的代码示例：

HTML:

<div id="progress-bar">
<div id="progress"></div>
</div>

CSS:

#progress-bar {
width: 300px;
height: 10px;
background-color: #ccc;
}
#progress {
width: 0;
height: 100%;
background-color: #00f;
}

JS:

// 获取进度条元素
var progressBar = document.getElementById('progress');
// 获取音频或视频元素
var media = document.getElementById('my-audio-or-video');
// 更新进度条的函数
function updateProgressBar() {
// 计算当前进度
var progress = (media.currentTime / media.duration) * 100;
// 更新进度条宽度
progressBar.style.width = progress + '%';
}
// 监听音频或视频的时间更新事件
media.addEventListener('timeupdate', updateProgressBar);

请注意，在上面的示例中，您需要将 #my-audio-or-video 替换为您实际使用的音频或视频元素的 ID。此外，上述代码仅实现了进度条的显示，您可能还需要添加其他功能，如用户交互控制播放进度等。