代码之家 › 专栏 › 技术社区 › Abhishek Mishra

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

html5-audio html5 javascript

33

Abhishek Mishra · 技术社区 · 14 年前

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

我想知道是否有更合适的方法来做这件事?

2 回复 | 直到 13 年前

1

44

robertc 14 年前

既然可以检测到支持的类型,为什么还要用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);

2

25

bobince 14 年前

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