Question

我使用以下代码更改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>

适用于Google Chrome，Safari，IE。但Firefox 34返回以下错误：

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

这里有什么问题？

UPD 即可。我通过等待canplaythrough事件被调用来验证它是否有效。可能这是问题吗？

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

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

Answer 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>