jQuery를 사용하여 오디오 재생

Question

내 웹 사이트의 여러 div에 사운드 아이콘 이미지 목록이 있습니다. 나는 어떤 아이콘이 위에있는 지에 따라 mouseenter과 mouseleave에 다른 노래를 재생/일시 정지하기 위해 jQuery를 사용하려고합니다. 첫 번째 항목은 작동하지만 나머지 작업을 수행하는 가장 좋은 방법을 이해하는 데 문제가 있습니다. 이것에 대한 도움은 정말로 감사 할 것입니다. 감사.

<audio preload="auto" id="songOne"> 
    <source src="audio/****.mp3" controls></source> 
    <source src="audio/****.ogg" controls></source> 
    <source src="audio/****.wav" controls></source> 
    Your browser isn't invited for super fun audio time. 
</audio> 

$(document).ready(function(){ 
    var song1 = $("#songOne")[0]; 
    $(".topDownloads img").first().mouseenter(function() { 
    song1.play(); 
    $(".topDownloads img").mouseleave(function() { 
     song1.pause(); 
    }); 
    }); 
}); 

Answer 1

사용자가 클릭하는 요소에 특정 노래 객체 이름을 포함시킬 수 있습니다.

<div class="topDownloads"> 
    <img data-song="someSong" src="..." /> 
    <img data-song="anotherSong" src="..." /> 
</div> 

이제 마우스 이벤트 콜백에서 데이터 속성을 사용할 수 있습니다 : 예를 들어, .topDownloads 요소를 가정하는 사업부입니다. 모든 노래 객체를 key-> value 객체에 저장하고 data 속성에서 가져옵니다. 내가 .mouseenter() 및 .mouseleave()의 .hover() function instead 사용했습니다

// setting up key->value song pairs 
var songs = { 
    'someSong':$("#someSong")[0], 
    'anotherSong':$("#anotherSong")[0], 
}; 

$(".topDownloads img").hover(function() { 
    // extract song key name 
    var songItem = songs[$(this).data('song')]; 
    songItem.play(); 
},function() { 
    // extract song key name 
    var songItem = songs[$(this).data('song')]; 
    songItem.pause(); 
}); 

알 수 있습니다. 이 함수는 두 개의 함수를 매개 변수로받으며, 첫 번째 함수는 마우스가 요소를 입력 할 때 트리거되고 두 번째 함수는 마우스가 요소를 떠날 때 실행됩니다. 나는이 구문이 좀 더 사용하기 쉽고 더 합리적이라고 생각한다.