如何在 Mobile Safari 中“自动播放”HTML5 音频元素？

Question

我正在将车辆仪表板显示单元应用程序移植到浏览器。最大的目标是让它在 Mobile Safari 中完全运行。

这是一个 HTML5/JS 音乐应用程序，它严重依赖 jQuery.load 通过加载页面片段在不同的“屏幕”之间移动。

问题在于，当用户选择要播放的曲目时，他们会被带到“正在播放”屏幕，该屏幕应该开始播放该曲目。一旦到达此屏幕，曲目就不会播放，用户需要从该屏幕显式单击播放才能开始音频播放。第一次发生这种情况后，自动播放会在应用运行期间运行。

我了解 Mobile Safari 有意设置了阻止程序以防止音频自动播放，从而阻止网络应用消耗数据，除非直接响应用户输入。

问题是，我的音频播放是对用户输入的直接响应……有点。但是，在我的播放实际开始之前需要发生很多事情，并且这些事情发生在正在播放的页面中（调用 API 以获取要播放的曲目的 URL，报告用户正在播放曲目，获取曲目元数据，yatta yatta yatta） .

为了解决这个问题，我让应用在启动时将静音 .1s mp3 文件预加载到音频元素中。然后直接响应单击事件以转换到正在播放的屏幕，我在音频元素上调用 .play()。

我假设直接响应用户输入而调用 .play 将在正在播放的页面中随后调用 .play() 工作，因为这是我之前观察到的行为。

只是，它似乎没有任何区别。

关于如何调整我的流程以便在加载正在播放的屏幕后开始音频播放的任何想法？

编辑： 在下面添加了一些代码sn-ps

Vehicle.audio = {
        init: function () {
            audioElement.setAttribute("src", "/audioinit.mp3");
            audioElement.play();
        },

        play: function (source) {
            log("VEHICLE: playing audio from source " + source);

            Vehicle.audio.stop();
            audioElement.setAttribute("src", source);
            audioElement.play();
        },

响应用户选择曲目：

$(document).on("click", "a.play-track", function () {
    Vehicle.audio.init();
    /* my wrapper function for jQuery.load() */
    replace_wrap("nowplaying.html");
});

然后在正在播放的页面上，调用 Vehicle.audio.play()。

Answer 1

问题是，我的音频播放是对用户输入的直接响应……有点。但是，在我的播放实际开始之前需要发生很多事情，并且这些事情发生在正在播放的页面中（调用 API 以获取要播放的曲目的 URL，报告用户正在播放曲目，获取曲目元数据，yatta yatta yatta） .

尝试为整个“正在播放的页面”添加一个“touchstart”事件监听器，然后在音频元素上同步调用.play()：

$(document).one("touchstart", function () {
  Vehicle.audio.init()
})

这样，只要 iOS 用户触摸正在播放页面上的任何位置，音频就会开始加载/播放。

Answer 2

AFAIK 这是 iOS 有意设置的限制。在允许脚本开始播放之前，用户必须与设备交互（触摸/单击事件）。