2012-04-19 74 views
2

我正在尝试编写自己的HTML5音频播放器:您可以偷看它hereHTML5音频Safari发行

它工作正常,在IE9中,FF,Chrome,但在Safari中由于某种原因,即使我已经听了

audio.addEventListener("loadedmetadata", tryThis, false); 

它显示的NaN 时间数据只是在玩之前。

audio.setAttribute("src", a[trackNo][1]); 
audio.load(); 
audio.addEventListener("loadedmetadata", tryThis, false); 

function tryThis() 
{ 
    this.addEventListener("timeupdate", function() { document.getElementById(radioPointer.toString()).innerHTML = formatTime(this.duration, this.currentTime);}, false); 

    this.addEventListener("ended", function() { document.getElementById(radioPointer.toString()).innerHTML = formatTime(this.duration, 0); document.rootsPlaylist.roots[radioPointer].checked = false; }, false); 

    this.play();  
} 

<audio id="rootsPlayer" style="display:none;"></audio> 

可以为您提供什么帮助吗?

非常感谢。

注意:你必须经常翻看歌曲才能看到我的意思,对不起,我忘了提及这一点。

+0

快速修复此,我用是检查isNaN(): https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/isNaN 然后将持续时间设置为00:00或其他默认值(如果其为真) – bcmoney 2012-04-19 18:09:34

+0

是的,我已经尝试过,但这不是我要用的样式。感谢你的分享。 – iTEgg 2012-04-19 18:12:01

+0

再次感谢您的意见,仔细想想,为了保持简单,我采用了isNan()! – iTEgg 2012-04-19 19:03:21

回答

0

原因是duration属性仅在发出durationchange事件后才初始化。所以,你既可以使用isNan()功能或者一些虚拟durationInitialized变量:

var durationInitialized = 0; 
audio.setAttribute("src", a[trackNo][1]); 
audio.load(); 
audio.addEventListener("loadedmetadata", tryThis, false); 
audio.addEventListener("durationchange", function() {durationInitialized = 1;}, false); 
function tryThis() { 
this.addEventListener("timeupdate", function() { 
    var time = ''; 
    if (durationInitialized) time = formatTime(this.duration, this.currentTime); 
    else time = formatTime(this.currentTime); 
    document.getElementById(radioPointer.toString()).innerHTML = time; 
}, false); 

this.addEventListener("ended", function() { 
    var time = ''; 
    if (durationInitialized) time = formatTime(this.duration, 0); 
    else time = formatTime(0); 
    document.getElementById(radioPointer.toString()).innerHTML = time; 
    document.rootsPlaylist.roots[radioPointer].checked = false; 
}, false); 

this.play();  
}