我有一个 JavaScript 网络应用程序可以像这样定期播放一些音频：
var SOUND_SUCCESS = new Audio('success.mp3');
SOUND_SUCCESS.play();
这在桌面浏览器上效果很好（在 Edge 和 Chrome 中测试），但它不能在 iPhone 上的 Safari 上播放。
我环顾了 Stack Overflow，几年前我找到了一些答案，除非您在全屏播放器中，否则无法从 Safari 播放音频。现在还是这样吗？
为什么 JavaScript .play() 不能在 iPhone Safari 上播放音频文件？
IT技术
javascript
ios
iphone
audio
safari
2021-02-21 17:16:29
6个回答
iOS 禁用自动播放，而是要求将播放作为用户交互的一部分启动（例如，您可以在 touchstart 侦听器中开始播放）。Apple's developer documentation上有一些关于此的文档。IBM 的开发人员站点上还有这篇文章克服 iOS HTML5 音频限制，其中包含示例和更多详细信息。
要添加到 xingliang cai 的回复中，这是我必须为我工作的代码示例（在下面编辑以在 iOS14 上工作，感谢@AndrewL！）：
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';
移动端 IOS 默认禁用自动声音播放。所以要解决这个问题。如果用户单击按钮开关，您可以将启用/禁用开关按钮放在页面上的某个位置，并使用音频元素（“ audioElement ”）播放一些声音。
之后，可以使用相同的“ audioElement ”通过更改其“ src ”属性并调用其“ play() ”方法来播放未来的声音，而无需任何进一步的用户交互。
为了让@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';
我用过这个：
useEffect(() => {
window.addEventListener('touchstart', () => {
document.getElementById('audio').muted = false
document.getElementById('audio').play()
})
})
只要用户滚动，声音就会播放