Блог

Главная - Вопросы по программированию - сбой воспроизведения (), поскольку пользователь не взаимодействовал с документом первой проблемы

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

#javascript #jquery

#javascript #jquery

Вопрос:

Я хочу воспроизвести звук после загрузки моей страницы. Вот мой код javascript:

 var playAudio = $("#sound")[0];
playAudio.play();

и html-код:

 <audio id="sound">
        <source src="../music/hide.ogg" type="audio/ogg">
        <source src="../music/hide.mp3" type="audio/mp3">
</audio>

консоль:
Неперехваченный (в обещании) DOMException: ошибка воспроизведения (), поскольку пользователь сначала не взаимодействовал с документом.

Ответ №1:

Большинство браузеров блокируют любой звук, воспроизводимый веб-страницей и не связанный с взаимодействием с пользователем (см. https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide ). При взаимодействии с пользователем я имею в виду такие вещи, как нажатие кнопки. Вы ничего не можете с этим поделать.

Но вы могли бы добавить кнопку «Пуск», которая отображает страницу и запускает музыку, например:

 const startbtn = document.getElementById("startbtn");
const content = document.getElementById("content");
const loader = document.getElementById("loader");
const music = document.getElementById("music");

//Add an event listner to the start button
startbtn.addEventListener("click", () => {
  //Show the loader and hide the button
  loader.style.display = "";
  startbtn.style.display = "none";
  //Wait for the music to start
  music.play().then(() => {
    //Hide the loader and show the content
    content.style.display = "";
    loader.style.display = "none";
  });
}); 
 <!-- The start button --->
<button id="startbtn">Start</button>

<!-- The actual content, hidden by default -->
<div id="content" style="display: none;">
  <p>Bla</p>
  <p>Bla</p>
  <p>Bla</p>
  <p>Bla</p>
  <p>Bla</p>
  <p>Bla</p>
  <p>Bla</p>
  <p>Bla</p>
  <p>Bla</p>
  <p>Bla</p>
  <p>Bla</p>
  <p>Bla</p>
  <p>Bla</p>
  <p>Bla</p>
  <p>Bla</p>
  <p>Bla</p>
  <p>Bla</p>
  <p>Bla</p>
  <p>Bla</p>
  <p>Bla</p>
  <p>Bla</p>
  <p>Bla</p>
</div>

<!-- This is displayed when the user has pressed the start button, but the music is still loading -->
<div id="loader" style="display: none;">
  <p>Loading ...</p>
</div>

<!-- The music. It is started by the Javascript -->
<audio id="music" src="https://opengameart.org/sites/default/files/audio_preview/swing_0.mp3.ogg" style="display: none;" loop></audio>

Комментарии:

1. я хочу сделать что-то вроде того, когда я захожу на веб-сайт, играет музыка, но если пользователь хочет остановиться, он просто нажимает кнопку. Могу ли я это сделать? и как?

2. Нет, браузер автоматически заблокирует звук. Но вы могли бы отображать только кнопку «Пуск» при загрузке веб-сайта и показывать всю страницу и воспроизводить музыку при нажатии кнопки «Пуск». Но я не знаю, соответствует ли это вашему сценарию.

3. как я могу создать кнопку до загрузки веб-сайта?

Метки: