1

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

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

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

我了解 Mobile Safari 故意设置了阻止程序以防止音频自动播放，这样 Web 应用程序就不会消耗数据，除非直接响应用户输入。

问题是，我的音频播放是直接响应用户输入的……有点。但是，在我的播放实际开始之前需要发生很多事情，并且这些事情发生在正在播放的页面中（调用 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()。

4

2 回答 2

0

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

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

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

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

于 2016-05-31T19:08:14.697 回答
-1

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

于 2016-05-31T18:18:30.390 回答