Question

我创建了一个音频对象，并希望在用户离开窗口时播放它。所以，我的代码在这里：

$('body').on('mouseleave', function(){
    var audio = new Audio( 'quite-impressed.mp3' )
    audio.play()
})

在Firefox中效果很好。如果我单击页面，然后将鼠标放在体外，它也可以在Chrome中使用。但是，当我离开鼠标而不点击页面时，控制台中显示了一个错误，并且音频无法播放

未捕获（承诺）的DOMException：play（）失败，因为用户没有首先与文档进行交互。 https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

但是，在此example site中，它可以正常工作而不与页面进行交互。我怎样才能实现呢？预先感谢。

Answer 1

似乎他们使用AudioContext播放声音。
Chrome几个月前确实回来了关于阻塞AudioContext API的消息，因为很多合理的使用没有为这种限制做准备，因此被打破了。

但是M71（将于2018年12月发布）将重新启用该限制，您可以在此处阅读：https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#webaudio

// this will work in Chrome < 70 but not af
onmouseout = e => {
  const ctx = new AudioContext();
  const osc = ctx.createOscillator();
  osc.connect(ctx.destination);
  osc.start(0);
  osc.stop(1);
}

外包的实时示例，因为无论如何总会向用户授予Stacksnippets手势：https://jsfiddle.net/zy3ev8ka/

Answer 2

尝试一下：

window.audio = new Audio( 'quite-impressed.mp3' ) $('body').on('mouseleave', function(){ audio.play() })

Answer 3

这在Chrome 77上对我有用：

在地址栏上：chrome：// settings / content / sound
关闭“允许站点播放声音（推荐）”
再次打开

JavaScript play（）函数在Chrome中不起作用

3 个答案: