如何以编程方式将多个来源添加到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音频标签？

回答

相关问题