Как избавиться от блокировки гугл фоновой музыки для игры на сайте?

Question

[LoveCodeandCoffe]

Пишу SPA и при входе на сайт должна играть фоновая музыка она блокируется и выдает такую ошибку

ссылка https://developers.google.com/web/updates/2017/09/...
Я так понял я должен как-то модифицировать код автозапуска и эта проблема пропадет

вот функция которая запускает воспроизведения аудио

const PlayAudio = (src) => {
  const audio = new Audio(src)
   audio.play()
   audio.currentTime = 1.0

  Function.prototype.AudioStop = function(stopAudio){
    stopAudio = audio
    HTMLAudioElement.prototype.stop = function()
    {
    this.pause();
    this.currentTime = 0.0;
    }
     stopAudio.stop()
  
  }

}



export default PlayAudio

и вызывается в app

window.onload = function(){

 



//? Add Events
 

 PlayAudio(Audio)

  
}

вызывается
Функция хорошо работает на других экранах. Тесть после совершения события( клик). А гугл блокирует запуск функции при загрузке страницы. И вроде как есть способ это решить

Comments

[Шохрух Шаймардонов]

пока лично не поковыряю не смогу ответить. поэтому залейте в песочницу (jsfiddle/codepen/repl.it/прочее) так легче отвечать будет

[LoveCodeandCoffe]

Шохрух Шаймардонов, Блин как-то очень прикольно работает. Один раз из ста музыка все таки воспроизводиться если нажать на плей в репле. Ошибку в реплской консоли не видно смотрите в браузере
https://repl.it/@Vlad1m1r95/ProperIllegalMysql

[hzzzzl]

LoveCodeandCoffe, попробовал раз пять, у меня каждый раз песня играет

[LoveCodeandCoffe]

hzzzzl, Что серьезно? А каким браузером пользуетесь. Вот ведь штука странная.

[hzzzzl]

LoveCodeandCoffe, просто хром на вин10, со всеми включенными адблоками итд
Version 78.0.3904.87

[Шохрух Шаймардонов]

LoveCodeandCoffe, тут оф.разрабы писали

[LoveCodeandCoffe]

Блин я тупой просто) Спамил кнопку несколько раз . Нужно было подождать секунду. Ну значит репл для проверки не годится. Т.к по идее я жму на кнопку

[LoveCodeandCoffe]

А вот если код скопировать и запустить в хроме то не должно работать(

Answer 1

[Александр Аксентьев]

Ну так всёж описано что надо делать по вашей же ссылке.
Нельзя просто так включать звук на сайте.

К этому должно привести действие пользователя т.е. в самом простом случае клик.

Если пользователь ходит по страницам например и фокус на сайте, то звук проигрывается без проблем.
А если зайти с открытой панелью разработчика и фокус в консоли где-то будет - звук не проиграется, потому что вы на сайте не совершили никаких действий.

Плюс можно понять сработал звук или нет

To detect whether browser will require user interaction to play audio, you can check the state of the AudioContext after you've created it. If you are allowed to play, it should immediately switch to running. Otherwise it will be suspended. If you listen to the statechange event, you can detect changes asynchronously.

Comments

[LoveCodeandCoffe]

Спасибо, я примерно так и думал. Что воспроизведение начнется только после действия пользователя.
Может можно это все таки обойди. У меня получается SPA это игра. При входе на сайт грузиться гифка из мультиков( с музыкой это выглядит прикольно). Хорошо может можно тогда схитрить и повесить не на клик а скажем на mouseover?

[Александр Аксентьев]

LoveCodeandCoffe, я не пробовал на других событиях, не было нужды. Но в теории должно на любом событии срабатывать, главное чтоб это пользователь сделал.
Так что тут и скрол, и движение мыши, и всё что угодно можно потестить.

[LoveCodeandCoffe]

Я проверил на движение мыши не работает только на клик(