jQuery - звук при наведении курсора работает неправильно

Question

Я делаю сайт для детей, я хочу, чтобы, когда кто-то наведет курсор на ссылку, которая будет воспроизводить звук.

Вот мой код-

<audio id="hoverA">
  <source src="files/sound/hover-01.mp3" type="audio/mpeg">
</audio>

JQuery код-

var hoverA = document.getElementById("hoverA");
$(document).ready(function(){
  $(".navbar .nav-link").mouseover(function(){
    hoverA.play();
  });
});

Звук воспроизводится хорошо только в том случае, если сначала я выполняю какие-либо действия на странице, например щелчок клавиатуры, щелчок мыши и т. Д. После обновления перестает работать, играть, только если я снова выполняю какие-то действия

Answer 1

Надеюсь, это будет полезно: css-tricks.com

var beepOne = $("#beep-one")[0];
$("#nav-one a")
	.mouseenter(function() {
		beepOne.play();
	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul id="nav-one" class="nav">
		   <li>
		   	<a href="#">Item 0</a>
		   	<audio id="beep-one" preload="auto">
				<source src="http://codeskulptor-demos.commondatastorage.googleapis.com/descent/gotitem.mp3"></source>
				<source hrfe="http://commondatastorage.googleapis.com/codeskulptor-assets/jump.ogg"></source>
				Your browser isn't invited for super fun time.
			</audio>
			</li>
		   <li><a href="#">Item 1</a></li>
		   <li><a href="#">Item 2</a></li>
		   <li><a href="#">Item 3</a></li>
		</ul>

Answer 2

В зависимости от того, что именно вы хотите сделать, когда кто-то начинает наводить курсор на ссылку, я бы предложил два метода с jQuery. Для будущих читателей или для справки я думаю, что было бы полезно отключить обе эти функции jQuery.

---

Hover

Используйте встроенную функцию .hover из jQuery. Подобный пример вы можете увидеть на JSFiddle здесь.

var hoverA = document.getElementById("hoverA");
$(document).ready(function() {
    $(".navbar .nav-link").hover(function () {
        hoverA.play();
    });
});

При входе / выходе

Если вы хотите, чтобы это началось в зоне входа или выхода из зоны.

var hoverA = document.getElementById("hoverA");
$(document).ready(function() {
        $(".navbar .nav-link").mouseenter(function () {
            hoverA.play();
        }).mouseleave(function ()
        {
            hoverA.play();
        });
});

---

Я полагаю, что лучше использовать функцию .hover, так как с .mouseover я думал, что сначала нужно зарегистрировать взаимодействие с пользователем.

Надеюсь, это поможет! :)

РЕДАКТИРОВАТЬ 1:

После проверки возникает проблема с браузером, как описано в аналогичном сообщении SO здесь . В нем говорится:

Я работал в адаптивном режиме браузера ... видимо это затем не запускает события mouseover / mouseout

Похоже, это было проблемой для запуска событий в jQuery.