Question

我一直在使用这个自定义音频播放器，我将它与一些教程放在一起并在互联网上解决，并且在过去的两个月里一直在使用它。

它在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>

Answer 1

重复代码：

audio.ondurationchange = setupSeekbar;

和

audio.addEventListener('durationchange', setupSeekbar);

尝试删除任何这些行。

如果在javascript中设置搜索栏值将会改变...你将不得不删除seekbar.onchange = seekAudio;

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

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

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

编辑（offtopic）：为了获得更好的性能，请删除代码

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

并将其附加到updateUI

div.textContent = formatTime(audio.currentTime);

自定义JavaScript / HTML5播放器问题

1 个答案: