在safari手机上播放（和重播）声音

Question

我需要在网站上显示新消息时播放声音。 它适用于Chrome和Safari，但我无法在Safari移动设备上运行。 我看到声音必须通过用户操作初始化，所以我尝试了：

var sound = new Audio('./path/to/my/sound.mp3');
var hasPlayed = false;

$('body').bind('click touchstart', function() {
  sound.load();
});    

sound.addEventListener('play', function() {
  hasPlayed = true;
});

var playSound = function() {
  if(hasPlayed) {
    sound.currentTime = 0;
  }
  sound.play();
}

不幸的是，声音仍然没有播放。 我也试过Buzz库，问题是一样的。

所以，问题是：如何在移动浏览器上以编程方式播放声音？

Answer 1

首先：iOS（5.01,5.1）上的Mobile Safari中的HTML5音频支持相当有限 。 但我已经设法在我的iPad 2网络应用程序中获得一些小的“事件类型”声音。 由于您只讨论应用程序的一个声音文件，因此您不必依赖于音频精灵技巧（即将多个MP3合并为一个MP3文件并根据您想要的声音更改合并文件中的播放位置玩了）。

您已经注意到，您无法在Mobile Safari中自动播放音频，即用户无需单击某个元素。 从技术上讲，必须在与单击事件相同的调用堆栈中播放 （未加载）音频。 但是，当Mobile Safari创建音频对象时，您可能会遇到0.5秒的延迟。 这是这个'问题'的解决方案：

• 在应用程序启动时（加载/初始化时），在用户单击/点击应用程序中的任何位置时，立即向HTML文档添加单击处理程序，该文档开始播放音频文件。 这将迫使Safari开始加载音频。
• 听取音频准备播放时触发的“播放”事件，并立即暂停。
• 现在，当您需要时，再次开始播放音频（无延迟）。

这是一些快速的JavaScript代码：

function initAudio() {
    var audio = new Audio('./path/to/my/sound.mp3');
    audio.addEventListener('play', function () {
        // When the audio is ready to play, immediately pause.
        audio.pause();
        audio.removeEventListener('play', arguments.callee, false);
    }, false);
    document.addEventListener('click', function () {
        // Start playing audio when the user clicks anywhere on the page,
        // to force Mobile Safari to load the audio.
        document.removeEventListener('click', arguments.callee, false);
        audio.play();
    }, false);
}

Answer 2

对于遇到此问题并且Jeroen解决方案无法解决的问题，这是一个有效的解决方案，可确保正确实施正确的范围。

确保在页面加载时调用initAudio。 即你的Init函数或者document.ready中的jquery（$（function（）{}）;）

function initAudio(){
    var audio = new Audio('./path/to/my/sound.mp3');
    var self = this;
    //not sure if you need this, but it's better to be safe
    self.audio = audio;
    var startAudio = function(){
                         self.audio.play();
                         document.removeEventListener("touchstart", self.startAudio, false);
                     }
    self.startAudio = startAudio;

    var pauseAudio = function(){
                         self.audio.pause();
                         self.audio.removeEventListener("play", self.pauseAudio, false);
                     }
    self.pauseAudio = pauseAudio;

    document.addEventListener("touchstart", self.startAudio, false);
    self.audio.addEventListener("play", self.pauseAudio, false);
}