播放（和重放）在Safari移动声音 [英] Play (and replay) a sound on safari mobile

问题描述

我需要在一个网站上出现一个新的消息，播放声音。它工作正常在Chrome和Safari，但我不能让它在Safari移动工作。
只见那声音具有与用户操作被初始化，所以我试过了：

I need to play a sound when a new message appears on a website. It works fine on Chrome and Safari but I can't make it work on Safari mobile. I saw that the sound has to be initialised with a user action so I tried that:

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();
}

不幸的是，声音还是不玩了。我也试图与巴斯库，这个问题是一样的。

Unfortunately, the sound still don't play. I also tried with the Buzz library, and the issue is the same.

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

So, the question is : how can I play a sound programmatically on mobile browsers ?

推荐答案

首先：在移动Safari浏览器在iOS（5.01，5.1）HTML5音频支持的相当有限。不过，我已经成功地得到一些小的事件类型的声音在我的iPad 2的Web应用程序的工作。既然你是在谈论你的应用程序只有一个声音文件，你不必依傍音频精灵技巧（即合并多个MP3的成一个MP3文件，并更改合并文件中的播放位置取决于你想要的声音播放）。

First of all: HTML5 audio support in Mobile Safari on iOS (5.01, 5.1) is rather limited. But I have managed to get some small 'event type' sounds working in my iPad 2 web apps. Since you are talking about only one sound file for your app, you don't have to fall back on audio sprites tricks (i.e. merging multiple MP3's into one MP3 file and changing the play position within the merged file depending on the sound you want to be played).

当你已经注意到了，你不能在自动移动Safari浏览器没有一些元素上的用户点击播放音频，即。从技术上讲，音频必须发挥（不加载）在同一个调用堆栈click事件。但是，你可能会遇到一个0.5秒的延迟，然后，当移动Safari浏览器创建音频对象。下面是这个问题的解决方案：

As you have noticed, you cannot play audio automatically in Mobile Safari, i.e. without the user clicking on some element. Technically speaking, the audio must be played (not loaded) in the same call stack as a click event. But you will probably experience a 0,5 second delay then, when Mobile Safari creates the audio object. Here is a solution to this 'problem':

• 在您的应用程序的开始（在加载/初始化），添加一个单击处理程序到启动，一旦用户点击播放音频文件的HTML文档/在该应用的任何水龙头。这将迫使Safari浏览器开始加载音频。


• 监听当音频准备播放时触发的'玩'事件，并立即暂停。


• 现在，开始播放音频（无延迟），当再次需要它。

下面是一些简单的JavaScript code：

Here is some quick JavaScript code:

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);
}

这篇关于播放（和重放）在Safari移动声音的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！