Question

我正在我的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>

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

Answer 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中对它进行了测试，看起来它可以正常工作。

Answer 2

type => "audio/mpeg"

那应该解决它。建议 - 请为音频元素提供id，并在jQuery而不是标记名称中使用它。

当源代码通过JavaScript填充时，Html5音频将无法在safari中播放

2 个答案: