Как восспроизвести аудио в React после загрузки страницы?

Question

[uRoot]

Мне нужно при отрисовки компонента на автомате восспроизвести аудио посредством JS. Нужно именно так, потому что на JS обрабатывается сама дорожка. Я пробую так:

function onPlay(audioRef) {
     ...
     audioRef.current.play()
  }

 ...

  useEffect(() => {
    return onPlay(audioRef)
  }, [])

  return(
    <audio
      ref={audioRef}
      loop
      src={sound}>
    </audio>
  )

Но получаю ошибку:
Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.
Как правильно восспроизвести аудио на автомате без участия юзера?

Comments

[kulaeff]

Если страница загружается на новой, еще не активной вкладке (на это и намекает ошибка), то боюсь никак - браузер блочит такое автоматом для предотвращения нежелательного "шума". Но попробуйте добавить атрибут autoplay элементу audio.

[uRoot]

kulaeff, вкладка активная

Answer 1

[Kirill Makarov]

Не совсем понятно что в твое случае audioRef, ты его передвешь в функцию но где он у тебя инициализируется не понятно. Попробуй создать может быть обычный state в useEffect его перевести в true, и уже посмотреть что будет дальше. Ну это подойдет если ты ожидаешь boolean значение, хотя можно сделать setState любого типа туда

Comments

[uRoot]

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

function onPlay(sound) {
     ...
     const audio = new Audio(sound);
     audio.play()
     ...
}

В другом компоненте, в componentDidMount() она проигрыватся при загрузке страницы:
componentDidMount() { onPlay(sound) }
При загрузке страницы всё ок. Но при перезагрузке я вижу ошибку, которую я указал в первом посте.

Прошу прощения за сумбур.