如何以編程方式將多個來源添加到HTML5音頻標籤？

很多示例演示了嵌套在音頻標籤中的多個源標籤，作爲克服不同瀏覽器之間編解碼器兼容性的一種方法。像這樣的東西 -如何以編程方式將多個來源添加到HTML5音頻標籤？

<audio controls="controls"> 
    <source src="song.ogg" type="audio/ogg" /> 
    <source src="song.mp3" type="audio/mpeg" /> 
    Your browser does not support the audio element. 
</audio>

雖然使用JavaScript，我也允許創建這樣一個音頻元素 -

var new_audio = document.createElement("audio");

我在哪裏可以由.src屬性設置它的來源 - new_audio.src="....";

我未能找到如何通過JavaScript在音頻元素中添加多個源，類似於HTML片段中顯示的源標記。

我是否操縱new_audio並在其中添加<source...標記，就像操縱其他DOM元素一樣？我現在這樣做，它的作品，這是 -

new_audio.innerHTML = "<source src='audio/song.ogg' type='audio/ogg' />"; 
new_audio.play();

我不知道是否有一個更合適的方式來做到這一點？

來源

2010-10-29 Abhishek Mishra

爲什麼要添加多個文件使用JavaScript時，你可以檢測到支持的類型？我建議改爲檢測最佳類型，然後設置src。

var source= document.createElement('source'); 
if (audio.canPlayType('audio/mpeg;')) { 
    source.type= 'audio/mpeg'; 
    source.src= 'audio/song.mp3'; 
} else { 
    source.type= 'audio/ogg'; 
    source.src= 'audio/song.ogg'; 
} 
audio.appendChild(source);

添加儘可能多的檢查，因爲您有文件類型。

來源

2010-10-29 15:41:30 robertc

我讓用戶在類屬性本身中推入替代格式的列表，使得使用插件來幫助他們創建音頻懸停。所以我不會意識到最終用戶提供什麼類型。感謝canPlayType提示，會很有用。 – 2010-10-29 16:15:16

只是我注意到 - 你可能不想在你的條件中使用var關鍵字。您正在創建一個新的new_audio變量，而不是引用現有的變量。 – 2011-04-01 02:24:15

@AndyWest是的，它也缺少一個括號 - 很糟糕的代碼全部:) – robertc 2011-04-01 08:53:58

您可以使用相同的DOM方法與任何其他元素：

var source= document.createElement('source'); 
source.type= 'audio/ogg'; 
source.src= 'audio/song.ogg'; 
audio.appendChild(source); 
source= document.createElement('source'); 
source.type= 'audio/mpeg'; 
source.src= 'audio/song.mp3'; 
audio.appendChild(source);

來源

2010-10-29 15:37:07 bobince

太棒了！解決了我的問題，更清潔。 – 2010-10-29 16:15:39

如何以編程方式將多個來源添加到HTML5音頻標籤？

回答

相關問題