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

Posted 2023-03-15

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

【英文标题】：How can I add multiple sources to an HTML5 audio tag, programmatically?

【发布时间】：2011-05-02 11:34:04

【问题描述】：

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

<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 sn-p 中显示的源标记。

我是否操作new_audio 并在其中添加<source... 标签，就像操作任何其他DOM 元素一样？我现在正在这样做并且它有效，这是-

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

不知道有没有更合适的方法呢？

【参考方案1】：

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

【参考方案2】：

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

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

【讨论】：

我让用户在类属性本身内推送一个替代格式列表，制作一个简单易用的插件来帮助他们创建音频悬停。所以我不知道最终用户提供了哪些类型。感谢您的 canPlayType 提示，会很有用。

我注意到了——你可能不想在条件语句中使用 var 关键字。您正在创建一个新的 new_audio 变量，而不是引用现有的。

@AndyWest 是的，它还缺少一个括号 - 整个代码都很糟糕:)

没什么大不了的...+1，因为无论如何我发现它很有用。

我尝试过 并且确实有效...知道为什么吗？