다음 탭 버튼을 눌렀을 때 (재생) 배경 음악을 일시 중지하는 방법

Question

재생하고 일시 중지 할 버튼이 하나있는 HTML5 오디오 배경 음악 플레이어가 있습니다. 애니메이션 효과가있어 재생 또는 일시 중지시 음악이 페이드 인 또는 페이드 아웃됩니다. 또한 나는 그들 중 하나에 YouTube 비디오가있는 내 페이지에 2 개의 탭이 있습니다. 그래서 나는 다음 슬라이드의 버튼을 누를 때 배경 음악을 페이드 아웃시키고 싶습니다. 슬라이드의 버튼을 다시 누르면 (비디오가없는 첫 번째 슬라이드로 돌아 가기) 음악이 페이드 인되어 재생됩니다. 여기

는 DEMO on JSFiddle

입니다 그리고 이것은 내 jQuery 코드입니다 :이

$('#go').on('click',function(evt){ 
    var active = $('.accordion:visible'); 
    var nextElement = active.next(); 
    active.hide(); 
    if(nextElement.hasClass("accordion")){ 
     nextElement.fadeIn(1000); 
    }else{ 
     $('.accordion:first').fadeIn(1000); 
    } 


}); 

//Music player 
var beepTwo = $("#musicBeat"); 
beepTwo[0].play(); 
$("#dan").click(function() { 
    if (beepTwo[0].paused == false) { 
     beepTwo[0].pause(); 
     beepTwo.animate({volume: 0}, 2000, 'swing', function() { 
      // really stop the music 

     }); 
     $(this).addClass("is-paused"); 
    } else { 
     beepTwo[0].play(); 
     beepTwo.animate({volume: 1}, 2000); 
     $(this).removeClass("is-paused"); 
    } 

}); 

Answer 1

당신이 이동 :

$('#go').on('click',function(evt){ 
    var active = $('.accordion:visible'); 
    var nextElement = active.next(); 

    active.hide(); 
    if(!nextElement.hasClass("accordion")){ 
     nextElement = $('.accordion:first'); 
    } 
    nextElement.fadeIn(1000); 

    if(nextElement.attr('id') == 'one') { 
     playBackgroundMusic(); 
    }else { 
     pauseBackgroundMusic(); 
    } 
}); 

function mute() { 
    muted = true; 
    pauseBackgroundMusic(); 
} 

function unmute() { 
    muted = false; 
    playBackgroundMusic(); 
} 

function pauseBackgroundMusic() { 
    if (beepTwo[0].paused == false) { 
     beepTwo.animate({volume: 0}, 2000, 'swing', function() { 
      // really stop the music 
      beepTwo[0].pause();   
     }); 
     $('#dan').addClass("is-paused"); 
    } 
} 

function playBackgroundMusic() { 
    // only play music if the player is not muted 
    if (beepTwo[0].paused == true && muted == false) { 
     beepTwo[0].play(); 
     beepTwo.animate({volume: 1}, 2000); 
     $('#dan').removeClass("is-paused"); 
    } 
} 

function toggleBackgroundMusic() { 
    if (muted) { 
     unmute(); 
    } else { 
     mute(); 
    } 
} 

$('#dan').click(toggleBackgroundMusic); 

//Music player 
var beepTwo = $("#musicBeat"); 
var muted = false; 
playBackgroundMusic(); 

은 무엇 스크립트가 지금은 다음에 열 아코디언 여부를보고 않습니다 탭의 ID는 "one"입니다. 이 경우 음악이 재생됩니다. 다른 탭이 열리면 음악이 일시 중지됩니다. toggleBackgroundMusic() 방법을 전환 할 수있는 플레이어가 사용된다.

더 많은 탭을 추가하고 음악을 재생/일시 중지하려는 경우 #go 요소의 onClick 함수에서 if 절을 간단히 편집 할 수 있습니다.

워킹 데모입니다에서 : http://jsfiddle.net/4Trwc/4/

편집 : 그리고 새로운 음소거 기능을 : http://jsfiddle.net/4Trwc/6/

편집-2 : 페이드 아웃 고정 : http://jsfiddle.net/4Trwc/7/