이미지 위에 마우스를 올리면 오디오가 나타납니다.

Question

뷰어에서 다른 이미지를 가리키면 여러 개의 오디오 파일을 재생하려고하는데 플레이어/막대/기능 중 하나를 화면에 표시하고 싶지는 않습니다. 이미지 위로 마우스를 올리면 사운드가 재생되고 사용자가 커서를 놓아도 재생이 완료됩니다. 모든 내 이미지는 내가 유혹 할 때 작동이있어

$(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> 

apDiv 태그에 배치되고, 그것은 사운드를 재생하지만, 여러 개의 이미지를 사용하지 못할, 그리고 마우스를 멀리 움직일 때 소리가 중지 이미지, 그것은 HTML과 JQuery를 사용하여 처음으로, 누구나 나를 도울 수 있습니까? 고맙습니다!

Answer 1

(편집 : 귀하의 질문에 다시 읽어) : HTML로

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

:

<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 속성을 가져 와서 <source> 태그의 src 속성에 적용합니다. 그런 다음 <audio> 태그 인 상위 태그를 가져온 다음 DOM 노드에서 play()을 호출합니다.