当通过 JavaScript 填充源时，Html5 音频不会在 Safari 中播放

Posted 2023-02-24

【中文标题】当通过 JavaScript 填充源时，Html5 音频不会在 Safari 中播放

【英文标题】：Html5 audio won't play in safari when the source is populated via JavaScript

【发布时间】：2012-02-14 02:44:28

【问题描述】：

我正在我的 Rails 应用程序中构建播放列表，但在 Safari 中播放音频时遇到了一些问题。如果 html5 音频元素的源是硬编码的，它在 safari 中可以正常播放，但是当它通过 javascript 填充时，它不会播放。这在 Chrome 和 IE 中运行良好，但在 Safari 中则不行。

这是播放列表条目的 Ruby：

.playlist_column
  -@music_posts.each do |post|
    .entry:id => post.id, :data => :post_id => post.id, :source => post.mp3.url

这里是音频元素，预加载了第一首曲目的源：

.playlist_player
  %audio:controls => "controls", :id => @music_posts.first.id
    %source:src => @music_posts.first.mp3.url, :type => "audio/mp3"

这里是 JavaScript：

$(".entry").click(function()
  var current_entry = $(this);
  var this_track = current_entry.data("source");
  var audio = $("audio").get(0);
  var audio_source = $("audio source");

  audio_source.attr("src", this_track);
  audio.load();
  audio.play();

);

当我在 safari 中检查音频元素时，它看起来与应有的完全一样，并且来源正确：

<audio controls="controls" id="7">
  <source src="http://s3.amazonaws.com/blog/posts/5/song/07%20-%20Young%20Blood.mp3?1328052011" type="audio/mp3">
</audio>

但它不会播放，我没有看到任何错误，有什么想法吗？提前致谢。

【参考方案1】：

查看src attribute on an existing source element 的 HTML 规范：

注意：当元素已插入视频或音频元素时，动态修改源元素及其属性将无效。要更改正在播放的内容，只需直接使用媒体元素上的 src 属性，可能使用 canPlayType() 方法从可用资源中进行选择。通常，在文档解析后手动操作源元素是一种不必要的复杂方法。

既然你（理论上）知道音频文件类型是可播放的，你就可以这样做

var audio = $("audio").get(0);
audio.src = this_track;
audio.load();
audio.play();

我刚刚在 Safari 中测试过，它似乎可以正常工作。

【讨论】：

谢谢！那成功了。由于我仍在增加我的编程能力，因此我感谢您的帮助。直接设置源代码在 Safari 中起到了作用，尽管 Chrome 和 IE 以另一种方式运行良好。

【参考方案2】：

type => "audio/mpeg"

这应该可以解决它。一个建议 - 请为音频元素提供 id 并在 jQuery 中使用它而不是标签名称。