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

Question

Может кто подсказать, как можно воспроизвести аудио файл, при наведении на кнопку?

Answer 1

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

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>

Answer 2

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

БЛОГ НА HUSL

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

Ответы (2 шт):