HTML5音頻跳躍位置

Question

我最近一直在爲HTML5音頻製作自定義控件，主要使用按鈕和範圍。我一直在Google Chrome 39上進行本地測試。一切運行良好。

當我把它上傳到我的網站時，我去了它的網址（http://barney.sweet.uk.net/byteup/jsfemto/），然後點擊播放。大約六秒後，音頻結束（242秒），並完成播放。本地版本與文件相同，並未這樣做。 Firefox和IE中也出現過同樣的情況：在線文件跳躍，而離線文件跳躍。

我的問題是該文件的在線和離線版本完全相同，但它們在同一瀏覽器上的工作方式不同。

這裏是我的JavaScript代碼：

<script> 

    var femtoPlayer = femtoPlayer || {}; 

    femtoPlayer.init = function() { 

     console.log('Welcome to JSFemto, the lightweight music player by ByteUp! Software, now ported to JavaScript!') 

     var player = document.getElementById('player'), 
      songProgress = document.getElementById('songProgress'), 
      name = document.getElementById('source').getAttribute('src'), 
      playing = false, 
      duration, 
      mousedown; 

     player.addEventListener('loadedmetadata', function() { 
      duration = this.duration; 
      console.log('Song duration is:', duration); 
     }); 

     console.log('JSFemto has loaded:', name); 
     document.getElementById('name').innerHTML = name; 

     player.addEventListener('timeupdate', function() { 
      console.log('Time update to:', this.currentTime); 
      var currentTime = this.currentTime/duration; 
      if (!mousedown){ 
       songProgress.value = currentTime; 
      } 
     }); 

     document.getElementById('playPauseButton').addEventListener('click', function() { 
      if (!playing) { 
       player.play(); 
       console.log('Playing...'); 
       playing = true; 
       document.getElementById('playPauseButton').innerHTML = 'Pause'; 
      } 
      else { 
       player.pause(); 
       console.log('Paused...'); 
       playing = false; 
       document.getElementById('playPauseButton').innerHTML = 'Play'; 
      } 

     }); 
     document.getElementById('stopButton').addEventListener('click', function() { 
      console.log('Stop button clicked'); 
      player.pause(); 
      player.currentTime = 0; 
      playing = false; 
      document.getElementById('playPauseButton').innerHTML = 'Play'; 
     }); 

     document.getElementById('volSlider').addEventListener('input', function() { 
      console.log('Volume changed'); 
      player.volume = this.value; 
     }); 

     songProgress.addEventListener('mousedown', function(){ 
      mousedown = true; 
     }); 
     songProgress.addEventListener('mouseup', function(){ 
      mousedown = false; 
     }); 

     songProgress.addEventListener('change', function() { 
      console.log('Song position changed'); 
      var position = this.value * duration; 
      player.currentTime = position; 
      player.play(); 
      playing = true; 
      document.getElementById('playPauseButton').innerHTML = 'Pause'; 
     }); 
    }; 

    console.log('Running function: femtoPlayer.init()') 
    femtoPlayer.init(); 

</script> 

這裏是HTML的主要部分：

<audio id="player"> 
    <source src="My Land.mp3" type="audio/mpeg" id="source" /> 
</audio> 
<div class="playerBorder"> 
    <div id="name"> 
     JSFemto 
    </div> 
    <br> 
    <button id="playPauseButton" class="big button">Play</button> 
    <button id="stopButton" class="med button">Stop</button> 
    <input type="range" class="small range" min="0.0" max="1.0" value="1.0" step="0.05" id="volSlider" /> 
    <br> 
    <input type="range" class="wide range" min="0.0" max="1.0" value="0" step="0.01" id="songProgress" /> 
    <br> 
</div> 

這有什麼錯我的代碼？

Answer 1

我從服務器上下載了你的MP3文件（http://barney.sweet.uk.net/byteup/jsfemto/My%20Land.mp3），該文件只有221KB，iTunes的播放方式與你描述的完全相同。

請檢查文件是否在中間沒有損壞的情況下上傳。

Answer 2

你的代碼是：

var currentTime = this.currentTime/duration; 

但應該是：

var currentTime = this.currentTime; 

無論如何，採取記住，currentTime尚未從2013年HTML5規範是固定式所以即使這個劇本只讀屬性將無法在Chrome/Chromium，Opera等中使用。