gpt4 book ai didi

javascript - 在 safari mobile 上播放(和重播)声音

转载 作者:数据小太阳 更新时间:2023-10-29 04:40:58 25 4
gpt4 key购买 nike

我需要在网站上出现新消息时播放声音。它在 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图书馆,问题是一样的。

因此,问题是:如何在移动浏览器上以编程方式播放声音?

最佳答案

首先:iOS 上的 Mobile Safari(5.01、5.1)对 HTML5 音频的支持是 rather limited .但我设法让一些小的“事件类型”声音在我的 iPad 2 网络应用程序中工作。由于您只为您的应用程序谈论一个声音文件,因此您不必求助于音频 Sprite 技巧(即将多个 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);
}

关于javascript - 在 safari mobile 上播放(和重播)声音,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10951524/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com