@avdoshka

Как создать функцию звук при наведении мышью на элемент?

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

Линия:

<hr class="hr-vertical-gradient">

Код:

<audio>
        <source src="audio/beep.mp3"></source> 
        Ваш браузер не поддерживает замечательный элемент <audio>.
</audio>


Скрипт:

var audio = $("#mySoundClip")[0];
$("nav a").mouseenter(function() {
audio.play();
});
  • Вопрос задан
  • 105 просмотров
Решения вопроса 1
sniggering_deus
@sniggering_deus Куратор тега JavaScript
I will live forever in the flame of your eyes.
const element = document.querySelector(".element");
const audio = new Audio("ссылка-на-музыкальный-файл.mp3");

const myAudioPlay = function () {
      audio.play();
};

const myAudioPause = function () {
      audio.pause();
};

element.addEventListener("mouseover", myAudioPlay);
element.addEventListener("mouseout", myAudioPause);


Или:

<div class="element"></div>

<audio class="my__audio" preload="auto">
<source src="ссылка-на-музыкальный-файл.mp3">
</audio>


.my__audio {
  display: none;
}


const element = document.querySelector(".element");
const audio = document.querySelector(".my__audio");

const myAudioPlay = function (e) {
  audio.play();
};
const myAudioPause = function (e) {
  audio.pause();
};

element.addEventListener("mouseover", myAudioPlay);
element.addEventListener("mouseout", myAudioPause);


Однако оба варианта не дают гарантию что при наведении будет срабатывать функция, ибо если при открытии страницы - первым действием пользователя будет наведение на элемент, может выпасть такая ошибка:

Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.


Поэтому либо искать обходные пути, либо вешать событие на клик, которое точно сработает.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@loonny
Как это понимать?
код

Ваш браузер не поддерживает замечательный элемент .
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы