Question

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

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

问题在于，当用户选择要播放的曲目时，他们将被带到“正在播放”的屏幕，该屏幕应该开始播放该曲目。一旦到达该屏幕，该轨道就不会播放，并且用户需要从该屏幕明确地点击播放以便开始音频回放。一旦这种情况首次发生，自动播放将在应用程序的持续时间内发挥作用。

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

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

为了尝试解决这个问题，我让应用程序在启动时将一个无声的.1s mp3文件预加载到音频元素中。然后直接响应点击事件转换到现在正在播放的屏幕，我在音频元素上调用.play（）。

我假设在直接响应用户输入时调用.play会在现在播放的页面中随后调用.play（），因为这是我之前观察过的行为。

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

有关如何调整流量以便在加载现在播放的屏幕后开始播放音频的任何想法？

编辑：添加了一些代码片段

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有意限制的限制。在允许脚本开始播放之前，用户必须与设备交互（触摸/单击事件）。

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

2 个答案: