Функция JavaScript play () не работает в Chrome

Question

Я создал аудиообъект и хочу воспроизвести его, когда пользователь покидает окно.Итак, мой код здесь:

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

Хорошо работает в Firefox.Это также работает в Chrome, если я нажимаю на странице, а затем оставляю мышь вне тела.Но когда я оставляю мышь без щелчка на странице, в консоли появляется сообщение об ошибке, и звук не воспроизводится

Uncaught (в обещании) DOMException: play () завершилась неудачно, потому что пользователь этого не сделалвзаимодействовать с документом в первую очередь.https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

Но в этом примере сайта он работает нормально, не взаимодействуя со страницей.Как я могу сделать это возможным?Заранее спасибо.

Answer 1

Кажется, они используют AudioContext для воспроизведения этого звука.
Chrome вернулся несколько месяцев назад о блокировке API AudioContext, потому что многие добросовестные применения не были подготовлены к такому ограничению и, таким образом, были нарушены им.

Но M71, который выйдет в декабре 2018 года, снова включит это ограничение, вы можете прочитать об этом здесь: 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() })