Question

许多示例演示了嵌套在音频标记中的多个源标记，作为克服不同浏览器之间编解码器兼容性的方法。像这样的东西 -

<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();

我想知道是否有更合适的方法可以做到这一点？

Answer 1

为什么只能检测支持的类型时，使用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);

添加与文件类型一样多的检查。

Answer 2

您可以使用与任何其他元素相同的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);

如何以编程方式将多个源添加到HTML5音频标签？

2 个答案: