当我尝试获得缓冲时间时,为什么audio.buffered.end(0)会收到错误消息

时间:2014-09-03 18:56:36

标签: jquery html5-audio

我正在使用HTML5和jQuery构建mp3播放列表播放器。在这个播放器中,有一个水平条逐渐与mp3文件的缓冲存在一起增长。

这是我的完整代码: get buffered end

HTML5:

<audio id="music" controls>
  <source src="https://archive.org/download/musicTestAudio27/Very%20nice%20%2827%29.mp3" type="audio/mpeg">
</audio>
    <br/>
    <div id="buffered"></div>

CSS:

#buffered{
    border:solid #ccc 1px;
    height:10px;
    background:red;
    display:block;
    width:1%;
}

使用Javascript:

var track = document.getElementById("music");
setInterval(function(){
var w = 100*(track.buffered.end(0))/track.duration;
$('#buffered').css("width",w+"%");
}, 1000);

但Firefox给我一条错误消息说:

  

IndexSizeError:索引或大小为负数或大于允许值   量

     

var w = 100 *(track.buffered.end(0))/ track.duration;

和Google Chrome说:

  

未捕获的IndexSizeError:无法执行&#39;结束&#39;在&#39; TimeRanges&#39;:The   index provided(0)大于或等于最大边界(0)。

4 个答案:

答案 0 :(得分:8)

我相信在元素初始化之前访问buffered.end时会出现错误。 您可以重写该代码以避免它

track = document.getElementById("music");
track.onprogress = function(){
    var w = 100*(track.buffered.end(0))/track.duration;
    $('#buffered').css("width",w+"%");
}

答案 1 :(得分:5)

track = document.getElementById("music");
track.onprogress = function(){
    if(track.buffered.length>0){
        var w = 100*(track.buffered.end(0))/track.duration;
        $('#buffered').css("width",w+"%");
    }
}

答案 2 :(得分:4)

接受的答案并不能解决我的问题。您还应该在访问buffered.end之前检查曲目是否已加载:

from pyVim import folder

folder.Register("[datastore]TestVM/TestVM.vmx")

答案 3 :(得分:0)

当尚未加载音频元素时会发生此错误,因此没有可查找代码的时间范围,因此它返回错误。