H5 audio 无法在 IOS / Safari 上自动播放

1,137 阅读1分钟

苹果浏览器(Safari)在默认情况下不允许声音在背景里自动播放。这是出于用户体验和隐私方面的考虑,避免在用户没有意识到的情况下自动播放声音。但有时候因为业务需要须得实现某种条件下的自动播放;

在某业务中,需要实现获取 aduioUrl 后赋值给 audio 的 src,然后实现音频自动播放;

<audio crossOrigin="anonymous" preload="auto"></audio>
// 在用户滚动页面/touch时先执行 lode()
document.querySelector('body').addEventListener('touchstart', function(e) {
  document.querySelector('audio').load();
}, false);

// 其他方法中就可以调用play了
 getAudioUrl() {
      // 通过请求获取到 audioUrl 为:https://static01.versa-ai.com/bugu/mis/default/2021/11/26/37d0c3f8b6cd/535037f8-49c0-4afc-8cd4-529e5ed7121e.mp3
      let audioUrl = "audioUrl";
      let dom = document.querySelector('audio');
      dom.src = audioUrl;
      dom.play();
 }