Аудио при наведении на изображение

Question

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

$(function(){ 
    $('#apDiv3').hover(
    function() { $("killyou")[0].play(); }, 
    function() { $("killyou")[0].pause(); } 
    ) 
}); 


<audio id="killyou" controls preload="auto"> 
    <source src="iwilkillyou.mp3" type="audio/mpeg"></source> 
    <div id="apDiv3"> 
     <img src="explosion_by_dbszabo1-d3hmssu.png" width="175" height="5"> 
    </div> 
</audio> 

я получил эту работу при наведении курсора мыши, он воспроизводит звук, но я не могу использовать его для нескольких изображений, и звук прекращается, когда мышь перемещается в сторону от image, это мой первый раз, используя html и JQuery, кто-нибудь может помочь мне с этим? Спасибо!

Answer 1

(редактирование: перечитайте Ваш вопрос)

Возможно:

$('.audio-source img').mouseover(function() { 
    $('player source').attr('src', $(this).data('file')) 
      .parent()[0].play(); 
}); 

С HTML:

<audio hidden id="player" controls preload="auto"> 
    <source src="default-audio.mp3" type="audio/mpeg"></source> 
</audio> 
<div class="audio-source"> 
    <img data-file="foo.mp3" src="image-1.png"/> 
    <img data-file="bar.mp3" src="image-2.png"/> 
    <img data-file="baz.mp3" src="image-3.png"/> 
</div> 

Я в настоящее время не в состоянии проверить, что, хотя.

Функция jQuery .hover(on, off) связывает две функции: одну для мыши, одну для мыши. Все, что вам нужно - это мышь, поэтому вы можете использовать функцию .mouseover(function). Что делает фрагмент jQuery, это захватить атрибут data-file из изображения, которое вы наведите курсор мыши, и применить его к атрибуту src тега <source>. Затем мы возьмем родительский элемент, который является тегом <audio>, и вызовите play() на узле DOM.