如何更改 Firefox 的音频源？答案

【问题标题】：How to change audio source for Firefox?如何更改 Firefox 的音频源？
【发布时间】：2015-01-29 19:49:43
【问题描述】：

我使用以下代码更改 HTML5 音频元素的来源：

$('#mp3').attr('src', url); // please note that remote URL is used
$("#audio").load();

这里是 HTML：

<audio id="audio" class="hidden">
  <source type="audio/mpeg" id="mp3">
</audio>

它在谷歌浏览器、Safari、IE 中运行良好。但是 Firefox 34 返回以下错误：

<source> element has no "src" attribute. Media resource load failed.

这里有什么问题？

更新。我通过等待调用canplaythrough 事件来验证它是否有效。大概是这个问题吧？

我也尝试过删除元素并重新添加它，但它不起作用：

$("#audio").empty();
$("<source>").attr("src", url).attr("type", "audio/mpeg").appendTo("#audio");
$("#audio").load();

【问题讨论】：

【解决方案1】：

我发现我在 Firefox 中使用的代码存在两个问题：

1) src 属性更改。正如@Nico 所提到的，Firefox 不能在直接更改src 值时正常工作，所以我不得不重新创建源元素：

$("#audio").empty();
$("<source>").attr("src", url).attr("type", "audio/mpeg").attr("id", "mp3").appendTo("#audio");
$("#audio").load();

2) 一旦src 的值被更改，Firefox 就不会开始加载音频（参见this answer），所以永远不会调用canplaythrough。添加preload="auto" 有帮助：

<audio id="audio" class="hidden" preload="auto">
  <source type="audio/mpeg" id="mp3"></source>
</audio>

【讨论】：