TransWikia.com

Звук, при наведении на кнопку

Stack Overflow на русском Asked on December 4, 2021

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

2 Answers

К сожалению, при наведении на элемент сразу после загрузки страницы, воспроизведения нет, а в консоли появляется ошибка 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>

Answered by Опан on December 4, 2021

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

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>

Answered by Enokin on December 4, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP