html中音频进度条控制
时间: 2023-06-27 22:04:20 浏览: 60
在 HTML 中,我们可以使用 `<audio>` 标签来添加音频文件到页面中。要添加音频进度条控制,可以使用 `<input>` 标签的 `range` 类型和 JavaScript 来实现。
以下是一个简单的示例:
```html
<audio id="myAudio" src="audio.mp3"></audio>
<input type="range" id="range" min="0" max="100" value="0">
<script>
const audio = document.getElementById('myAudio');
const range = document.getElementById('range');
audio.addEventListener('timeupdate', function() {
const progress = (audio.currentTime / audio.duration) * 100;
range.value = progress;
});
range.addEventListener('change', function() {
const time = (range.value / 100) * audio.duration;
audio.currentTime = time;
});
</script>
```
在上面的示例中,我们使用 `timeupdate` 事件来监听音频播放的时间变化,计算出当前进度百分比并将其设置为 `<input>` 标签的值。当用户拖动进度条时,我们使用 `change` 事件来监听其变化,并将当前时间设置为音频文件的对应位置。
请注意,此示例仅用于演示目的。要使其适合您的项目,您可能需要进行一些自定义,例如样式和其他交互行为。