Question

我有一个问题，我可以播放音频文件，如果它直接添加到html5源代码作为src属性，但如果我尝试在运行时设置src它就不会播放。

最初我有以下HTML包含一些音频标签：

<audio id="audio1" controls preload="none" src="http:/theurl/clip1.mp3"></audio>
<audio id="audio2" controls preload="none" src="http:/theurl/clip2.mp3"></audio>

使用以下函数播放剪辑，使用id和剪辑URL调用

function audioClick(id, clip) {
    var audio = document.getElementById(id);
    if (audio.paused) {
        audio.play();
    }
    else {
        audio.pause();
        audio.currentTime = 0;
    }
}

这是有效的，当用户点击页面的相关部分时，会播放相应的音频文件，但问题是浏览器大约需要3-4秒才能加载太长时间的页面。我已经找到了延迟的原因，因为src属性是远程文件。将预加载设置为“无”或“元数据”对加快速度没有任何作用。

所以为了解决这个问题，我想在运行时设置src，所以将函数更改为：

function audioClick(id, clip) {
    var audio = document.getElementById(id);
    if (audio.paused) {
        audio.setSrc(clip);
        audio.load();
        audio.play();
    }
    else {
        audio.pause();
        audio.currentTime = 0;
    }
}

我尝试将html设置为此

<audio id="audio1" controls></audio>
<audio id="audio2" controls></audio>

但有两个问题： 1）音频不播放 2）控件显示一条说明文件无法播放的初始消息

我不是在控件中有一条消息说文件无法播放所以我将html更改为：

<audio id="audio1"></audio>
<audio id="audio2"></audio>

然而，文件无法播放的问题仍然存在。

为什么音频文件不会以这种方式播放？

Answer 1

尝试类似：

function audioClick(id, src) {
  var audio = document.getElementById(id);
  if (audio.paused) {
    audio.addEventListener('canplay', function canplay() {
      this.removeEventListener('canplay', canplay, false);
      this.play();
    }, false);

    audio.src = src;
  }
  else {
    audio.pause();
    audio.currentTime = 0;
  }
}

并查看其他可用的media events。

Answer 2

当你的目标是iOS时，有一些陷阱。第一个是设置音频标签的属性预加载什么都不做。 iOS只会按照自己的意愿行事，而我们无能为力。

我认为Yoshi的代码在Chrome中工作得很好但在iOS中不能用，因为iOS要求对audio.play（）的所有调用都与click事件在同一个调用堆栈中。由于播放调用是由canplay事件引起的，我认为它被iOS忽略了。此外，在设置src时，iOS不会预加载任何音频。您需要调用audio.load（）来执行此操作，但与以前一样，您需要用户单击某些内容才能让iOS实际执行该功能。

要使其在iOS中运行，您需要避免使用canplay回调，只需使用：

audio.src = src;
audio.play();

这不太理想。 Safari加载文件时可能会有一两秒，但它应该可以工作。与Android浏览器或更好的新移动Chrome相比，iOS5处理HTML5音频相当有限。移动Safari有点抛出窗口的规格，只是做它想要的。

如果src静态设置，则播放html5音频，但如果动态设置则不播放

2 个答案: