html5 autoplay不起作用 Uncaught (in promise) DOMException: play() failed because the user didn't interac

64 阅读1分钟

Chrome的autoplay政策在2018年4月做了更改。

新的行为:浏览器为了提高用户体验,减少数据消耗,现在都在遵循autoplay政策,Chrome的autoplay 政策非常简单

1. muted autoplay始终被允许

2. 音乐的autoplay 只有在下面集中情况下起作用:

    1. 有用户行为发生像(click,tap,etc).

    2. 对于桌面程序,用户已经提前播放了音频

    3. 对于移动端用户将音频网址home screen.

解决方案:

  1. Open chrome://flags/#autoplay-policy
  2. Setting No user gesture is required
  3. Relaunch Chrome

用户行为例子:

$('.audioBox').click(function(){
    $('.audio').get(0).paused?(()=>{
      $('.musicImg').attr('src','./img/audio.png');
      $('.audioBox').addClass('on');
      $('.audio').get(0).play()
    })()
   :(()=>{
    $('.musicImg').attr('src','./img/OFF.png');
    $('.audioBox').removeClass('on');
    $('.audio').get(0).pause();
   })();
  })