当网站上出现新消息时,我需要播放声音。它在 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 http://buzz.jaysalvat.com/图书馆,问题是一样的。
所以,问题是:如何在移动浏览器上以编程方式播放声音?
首先:iOS(5.01、5.1)上的 Mobile Safari 对 HTML5 音频的支持是相当有限 http://buildingwebapps.blogspot.fr/2012/04/state-of-html5-audio-in-mobile-safari.html。但我已经成功地在我的 iPad 2 网络应用程序中获得了一些小的“事件类型”声音。由于您只讨论应用程序的一个声音文件,因此您不必依靠音频精灵技巧(即将多个 MP3 合并到一个 MP3 文件中,并根据您想要的声音更改合并文件中的播放位置)被播放)。
正如您所注意到的,您无法在 Mobile Safari 中自动播放音频,即在用户不单击某些元素的情况下。从技术上来说,音频必须是played(未加载)与单击事件位于同一调用堆栈中。但是,当 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);
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)