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。此外，上述代码仅实现了进度条的显示，您可能还需要添加其他功能，如用户交互控制播放进度等。