회전 목마/슬라이더에있는 특정 슬라이드 이미지에서 오디오 클립을 재생 하시겠습니까?

Question

3 개의 이미지가있는 기본 슬라이더가 있습니다. 3 개의 이미지 내에서 하나의 애니메이션 GIF가 있는데,이 GIF에는 연결된 오디오 클립이 있습니다. 애니메이션 GIF 슬라이드가 나타나면 오디오 클립을 재생할 수 있기를 원합니다 (오디오 클립의 길이는 3 초입니다). jQuery에서이 문제를 어떻게 해결할 수 있습니까?

HTML :

<div id="carousel-main" class="carousel slide"> 
    <div class="carousel-inner"> 
    <div class="active item"> 
     <img src="image-1.jpg" alt=""> 
    </div> 
    <div class="item"> 
     <img src="animated.gif" alt=""> 
     <embed src="audio/clip.mp3"></embed> 
    </div> 
    <div class="item"> 
     <img src="image-3.jpg" alt=""> 
    </div> 
    </div> 
</div> 

JS :

$('#carousel-main').carousel({interval: 3200}); 

Answer 1

첫째, 당신은 HTML5 마크 업을 사용하려고하는 경우뿐만 아니라, 바로 그것을 만들 수 ... audio로 embed을 변환합니다. 올바른 슬라이드가 활성화 된 경우

가

function playClip(){ 
    if($('.item').eq(1).hasClass('active')){ 
     $(this).next().get(0).play(); 
    } 
} 

이 클립을 할 것이다, 그러나 당신은의 회전이의 전화를 동기화해야합니다 :

<audio src="audio/clip.mp3"></audio> 

둘째,이 기능을 시험해 회전 목마는 : 이것은 이론적으로 회전 목마와 오디오를 동기화해야

window.setInterval(playClip,3200); 

, 회전 목마 이동 기능을 매번 실행하고, 두 번째가 활성화 된 경우 다음 클립을 재생할 수 있습니다. 테스트하지는 않았지만 작동해야합니다.