为什么 JavaScript .play() 音频文件不能在 iPhone Safari 上播放？

Question

我有一个 JavaScript 网络应用程序可以像这样定期播放一些音频：

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

这在桌面浏览器上运行良好（在 Edge 和 Chrome 中测试），但在 iPhone 上的 Safari 上无法播放。

我查看了 Stack Overflow，发现了几年前的一些答案，除非您使用全屏播放器，否则无法从 Safari 播放音频。现在还是这样吗？

Answer 1

iOS 禁用自动播放，而是要求播放作为用户交互的一部分启动（例如，您可以在 touchstart 侦听器中开始播放）。 IBM 开发者网站上的 Apple's developer documentation. There's also this article Overcoming iOS HTML5 audio limitations 上有一些关于此的文档，其中包含示例和更多详细信息。

Answer 2

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

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

Answer 3

添加到 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';

Answer 4

哈哈，我就这样智取了

在页面中放入 audio 标签并自动播放 (true)

<audio id="beep" src={Assets.SOUND_BEEP} autoPlay />

安装元素后会播放声音。 （即使在 safari 中 iOS）

那么看来你可以随时通过调用

再次播放它

document.getElementById('beep').play();

但现在你可能会说，但我不想把声音播放成自动播放。

是的，我聪明地把“静音” 属性放在上面，然后在播放时将其设置为false。

<audio id="beep" src={Assets.SOUND_BEEP} autoPlay muted />

然后玩：

document.getElementById('beep').muted = false;
document.getElementById('beep').play();

Answer 5

我用过这个：

useEffect(() => {
  window.addEventListener('touchstart', () => {
    document.getElementById('audio').muted = false
    document.getElementById('audio').play()
  })
})

用户一滚动，声音就会播放

Answer 6

为了让@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 7

非常老的问题，但可能对某些人有所帮助，就我而言（当然这可能并非在所有情况下都可行），它有助于播放所有音频文件 1 毫秒，然后暂停它们。之后，如果您继续播放音频，它会正常工作。

   playButton.addEventListener('click', function(){
      introVid.play();
      audioPlayers[0].play(); //every array element is constructed using new Audio("yourlink");
      audioPlayers[1].play();
      audioPlayers[2].play();
      audioPlayers[3].play();
      window.setTimeout(function(){
        audioPlayers[0].pause();
        audioPlayers[1].pause();
        audioPlayers[2].pause();
        audioPlayers[3].pause();
      },1);
    })

Answer 8

Safari 优先考虑视频配乐而不是音频文件！如果视频有配乐，即使它是无声的并设置为静音，它也会阻止音频。解决方案是从视频中去除配乐，而不是在其上录制。我希望这可以帮助别人！我因为这个问题浪费了好几天的时间。

为什么 JavaScript .play() 音频文件不能在 iPhone Safari 上播放？

Why can't JavaScript .play() audio files on iPhone safari?

javascript

iphone

safari

audio

ios