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

Question

我有一个问题，如果将音频文件作为 src 属性直接添加到 html5 源代码，我可以播放它，但如果我尝试在运行时设置 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

当您的目标是 iOS 时，会遇到一些陷阱。第一个是设置音频标签的属性 preload 什么都不做。 iOS 只会做它想做的事，对此我们无能为力。

我认为 Yoshi 的代码在 chrome 中运行良好但在 iOS 中运行不佳的原因是因为 iOS 要求对 audio.play() 的所有调用都与单击事件位于同一调用堆栈中。由于播放调用来自 canplay 事件，我认为它被 iOS 忽略了。此外，当您设置 src 时，iOS 不会预加载任何音频。您需要调用 audio.load() 来执行此操作，但就像以前一样，您需要用户单击某些内容才能让 iOS 实际执行该功能。

要使其在 iOS 中工作，您需要避免 canplay 回调并简单地使用:

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

不太理想。 Safari 加载文件时可能需要一两秒钟，但它应该可以正常工作。与 android 浏览器或更好的新移动 chrome 相比，iOS 对 HTML5 音频的处理相当有限。 Mobile Safari 有点把规范扔到窗外，只做它想做的事。