按下一個製表符按鈕時如何暫停（播放）背景音樂

Question

我有一個HTML5音頻背景音樂播放器，其中有一個按鈕用於播放和暫停。它具有動畫效果，因此在播放或暫停時音樂會淡入或淡出。另外我的頁面中有2個標籤，其中有一個是YouTube視頻。所以我希望按下下一張幻燈片的按鈕時淡出背景音樂。當再次按下幻燈片的按鈕（回到沒有視頻的第一張幻燈片）時，音樂淡入並播放。

這裏是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/