Html5音频获胜'当源代码通过JavaScript填充时，t在safari中播放

Html5 audio won't play in safari when the source is populated via JavaScript

本文关键字：填充 播放 safari JavaScript 获胜 音频 源代码 Html5      更新时间：2023-09-26

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

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

查看现有源元素上src属性的HTML规范：

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

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

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

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

type => "audio/mpeg"

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

相关文章：