如何以编程方式将多个来源添加到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();
我不知道是否有一个更合适的方式来做到这一点?
答
为什么要添加多个文件使用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);
添加尽可能多的检查,因为您有文件类型。
答
您可以使用相同的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);
+1
太棒了!解决了我的问题,更清洁。 – 2010-10-29 16:15:39
我让用户在类属性本身中推入替代格式的列表,使得使用插件来帮助他们创建音频悬停。所以我不会意识到最终用户提供什么类型。感谢canPlayType提示,会很有用。 – 2010-10-29 16:15:16
只是我注意到 - 你可能不想在你的条件中使用var关键字。您正在创建一个新的new_audio变量,而不是引用现有的变量。 – 2011-04-01 02:24:15
@AndyWest是的,它也缺少一个括号 - 很糟糕的代码全部:) – robertc 2011-04-01 08:53:58