使用HTML5和Javascript播放聲音的最佳方式

我試圖播放聲音，並且找到了適用於我的兩種方法。哪個更好，爲什麼？添加一個「加載」事件監聽器是一個好主意嗎？使用HTML5和Javascript播放聲音的最佳方式

第一種方式：

$(document).ready(function() { 
    var audioElement = document.createElement('audio'); 
    audioElement.setAttribute('src', 'sound.ogg'); 
    audioElement.addEventListener("load", function(){ 
     audioElement.play(); 
    }, true); 

    audioElement.play(); 
});

方式二：

$(document).ready(function() { 
    audioElement = new Audio('sound.ogg'); 
    audioElement.play(); 
});

來源

2011-12-06 Tom Sarduy

在新的音頻（）情況下，音頻的網絡來源如何？ – vinnitu

你真的應該用第一種方式（與load），因爲'DOMReady'不能保證聲音文件完成下載，就像Image一樣。

來源

2011-12-06 04:37:42 tungd

，但是如何初始化音頻文件更好？ 'new Audio（'sound.ogg'）;'或'document.createElement（'audio'）;'?? –

AFAIK他們是一樣的，都會創建一個新的'HTMLAudioElement'。但是'new Audio（）'構造函數是舊的方式（在DOM1之前），'document.createElement（）'是更新的方式（DOM2）;您不能將使用'new Audio（）'創建的元素附加到文檔中。 '新音頻（'sound.ogg'）'是'var a = new Audio（）的快捷方式; a.src ='sound.ogg';'。 – tungd

好的，我在這裏做了個測試http://jsperf.com/new-audio-vs-document-createelement-audio – tungd

你真的應該使用功能檢測系統這一點。我會用Modernizr to test for HTML5 audio。這樣，您只會嘗試將音頻提供給那些可以使用HTML5獲得音頻的人。

如果使用Modernizr找不到，您甚至可以使用test for HTML5 features並備用備用選項。這些替代方案被稱爲「polyfills」，Modernizr支持的列表是here。

這樣做的好處是，您涵蓋瀏覽器功能的所有基礎。我可憐那些仍在使用IE7的傻瓜。

來源

2011-12-06 04:01:52 Andrew

我知道Modernizr，但我試圖在IE的情況下播放的聲音，我使用的是html5shiv腳本，而不是Modernizr –

使用HTML5和Javascript播放聲音的最佳方式

回答

相關問題