为什么iPhone Safari上没有JavaScript .play()音频文件？

Question

我有一个JavaScript Web应用程序工作,定期播放一些音频,如下所示:

var SOUND_SUCCESS = new Audio('success.mp3');
SOUND_SUCCESS.play();

这适用于桌面浏览器(在Edge和Chrome中测试),但它不能在iPhone上的Safari上播放.

我查看了Stack Overflow,几年前我发现一些答案,除非你在全屏播放器中,否则不可能从Safari播放音频.这仍然是这样吗？

Answer 1

要添加到 xingliang cai 的响应中，这是我必须为我工作的代码示例：

const soundEffect = new Audio();

// onClick of first interaction on page before I need the sounds
soundEffect.play();

// later on when you actually want to play a sound at any point without user interaction
soundEffect.src = 'path/to/file.mp3';
soundEffect.play();

Answer 2

iO禁用自动播放,而是要求播放作为用户交互的一部分启动(例如,您可以在touchstart监听器中开始播放).在Apple的开发人员文档中有关于此的一些文档.本文还讨论了IBM开发人员网站上的iOS HTML5音频限制,其中包含示例和更多详细信息.

Answer 3

为了让 @user2415116 的解决方案在 iOS 14 中工作，我这样做了：

const soundEffect = new Audio();
soundEffect.autoplay = true;

// onClick of first interaction on page before I need the sounds
// (This is a tiny MP3 file that is silent and extremely short - retrieved from https://bigsoundbank.com and then modified)
soundEffect.src = "data:audio/mpeg;base64,SUQzBAAAAAABEVRYWFgAAAAtAAADY29tbWVudABCaWdTb3VuZEJhbmsuY29tIC8gTGFTb25vdGhlcXVlLm9yZwBURU5DAAAAHQAAA1N3aXRjaCBQbHVzIMKpIE5DSCBTb2Z0d2FyZQBUSVQyAAAABgAAAzIyMzUAVFNTRQAAAA8AAANMYXZmNTcuODMuMTAwAAAAAAAAAAAAAAD/80DEAAAAA0gAAAAATEFNRTMuMTAwVVVVVVVVVVVVVUxBTUUzLjEwMFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVf/zQsRbAAADSAAAAABVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVf/zQMSkAAADSAAAAABVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV";

// later on when you actually want to play a sound at any point without user interaction
soundEffect.src = 'path/to/file.mp3';

Answer 4

移动设备上的 IOS 默认禁用自动声音播放。所以要解决这个问题。如果用户单击按钮开关，您可以将启用/禁用开关按钮放在页面上的某个位置并使用音频元素（“ audioElement ”）播放一些声音。

之后，可以使用相同的“ audioElement ”通过更改其“ src ”属性并调用其“ play() ”方法来播放未来的声音，而无需任何进一步的用户交互。