< audio>的自定义进度栏和< progress> HTML5元素 [英] Custom progress bar for <audio> and <progress> HTML5 elements

问题描述

我很想知道如何使用标签和简单的Javascript为音频播放器创建自定义的搜索栏.

I am mind boggled at working out how to create a custom seekbar for an audio player using the tag and simple Javascript.

当前代码:

    <script>
  function play() {
   document.getElementById('player').play();
  }

  function pause() {
   document.getElementById('player').pause();
  }
</script>


<audio src="sample.mp3" id="player"></audio>  
<button onClick="javascript:play()" >Play</button>
<button onClick="javascript:pause()" >Pause</button>
<progress id="seekbar"></progress>

是否可以链接进度条，以便在播放歌曲时显示进度?

Would it be possible to link the progress bar so that when i play a song the progress is shown?

推荐答案

是的，可以使用

Yes, it is possible using the timeupdate event of the audio tag. You receive this event every time the position of the playback is updated. Then, you can update your progress bar using the currentTime and duration properties of the audio element.

您可以在此小提琴

这篇关于< audio>的自定义进度栏和< progress> HTML5元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！