javascript - 按下下一个选项卡按钮时如何暂停(播放)背景音乐

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/