1

我一直在使用这个自定义音频播放器，我在互联网上整理了一些教程和解决方案，并且在过去的 2 个月里一直在使用它。

它在 Chrome 中 100% 工作，但在更新后，搜索栏碰巧停止工作。

这是我的问题吗？还是对其他人有用？

HTML： 

 <div id="musicplayer">
      <table>
           <tr>
                <audio id="audio" src="../audio/oby/weightless/Got To Be Free.mp3"></audio>
                <td>
                     <button id="play" type="button" onclick="playPause()" ></button>
                </td>
                <td>
                     <div id="boxed" >
                          <a href="#" id="songName">Select a song from the playlist</a>
                          <p class="right" id="timeInfo">00:00</p>
                          <input type="range" step="any" id="seekbar"></input> 
                     </div>
                </td>       
           </tr>
      </table>
 </div>

JavaScript：

<script>    
    var audio = document.getElementsByTagName('audio')[0],
    div = document.getElementById('timeInfo');

     function formatTime(s, m) {
     s = Math.floor( s );    
     m = Math.floor( s / 60 );
     m = m >= 10 ? m : '0' + m;    
     s = Math.floor( s % 60 );
     s = s >= 10 ? s : '0' + s;    
     return m + ':' + s;
     }

     setInterval(function() 
     {
     div.textContent = formatTime(audio.currentTime);
     }, 100);

     seekbar.value = 0;
     var audio = document.getElementById("audio");
     var seekbar = document.getElementById('seekbar');

     function setupSeekbar() {
     seekbar.min = audio.startTime;
     seekbar.max = audio.startTime + audio.duration;
     }
     audio.ondurationchange = setupSeekbar;

     function seekAudio() {
     audio.currentTime = seekbar.value;
     }

     function updateUI() {
     var lastBuffered = audio.buffered.end(audio.buffered.length-1);
     seekbar.min = audio.startTime;
     seekbar.max = lastBuffered;
     seekbar.value = audio.currentTime;
     }
     seekbar.onchange = seekAudio;
     audio.ontimeupdate = updateUI;
     audio.addEventListener('durationchange', setupSeekbar);
     audio.addEventListener('timeupdate', updateUI);
</script>
4

1 回答 1

1

重复代码：

audio.ondurationchange = setupSeekbar;

和

audio.addEventListener('durationchange', setupSeekbar);

尝试删除任何这些行。

如果在 javascript 中设置 seekbar 值会触发 onchange ......你将不得不删除seekbar.onchange = seekAudio;

当用户随时点击时，您的搜索栏不会搜索吗？或者更新时间有问题。（时间在更新，但 seekbar 没有）？

你不需要这些代码，也可能导致问题一...（搜索栏更新问题）

var lastBuffered = audio.buffered.end(audio.buffered.length-1); 
seekbar.min = audio.startTime; 
seekbar.max = lastBuffered;

编辑（题外话）：为了更好的性能删除代码

 setInterval(function()  
 { 
 div.textContent = formatTime(audio.currentTime); 
 }, 100);

并将其附加到 updateUI

div.textContent = formatTime(audio.currentTime);
于 2012-10-04T10:41:56.820 回答