js实现播放进度条

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

```
CSS:
```css
#progress-bar {
width: 300px;
height: 10px;
background-color: #ccc;
}
#progress {
width: 0;
height: 100%;
background-color: #00f;
}
```
JS:
```javascript
// 获得进度条元素
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。另外，上述代码仅实现了进度条的显示，您可能还需要添加其他功能，如用户交互控制播放进度等。