0

Как воспроизвести аудио-файл при наведении на кнопку?

2 ответа 2

3

Можно сделать так.

let btn = document.getElementById("button");

btn.addEventListener("mouseenter", function(event) {
  let sound = document.getElementById("Sound");
  sound.play();
}, false);
<div class="animatedButton">

  <audio id="Sound" src="https://www.soundjay.com/button/sounds/beep-07.mp3"></audio>
  <button id="button">Hover me</button>

</div>

1

К сожалению, при наведении на элемент сразу после загрузки страницы, воспроизведения нет, а в консоли появляется ошибка Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first т. е., play () не удалось, потому что пользователь не взаимодействовал с документом в первую очередь. Это из-за того, что браузер не считает mouseout, mouseover, mouseenter, mousemove событиями, подтверждающими взаимодействие с документом. Эту ситуацию можно исправить так:

<button id="button">Hover me</button>
<div id=mydiv></div>
<script>
let btn = document.getElementById("button");
btn.onmouseenter = function(){
    mydiv.innerHTML = "<iframe src='https://www.soundjay.com/button/sounds/beep-07.mp3' allow='autoplay' style='display: none'></iframe>";
};
</script>

1
  • спасибо, очень выручили! 23 июл 2020 в 16:49

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.