Javascript 按下“下一个选项卡”按钮时如何暂停（播放）背景音乐

我有一个HTML5音频背景音乐播放器，有一个按钮可以播放和暂停。它具有动画效果，因此在播放或暂停时，音乐会淡入或淡出。我的页面上还有两个标签，其中一个是youtube视频。因此，我希望在按下下一张幻灯片的按钮时，背景音乐淡出。当再次按下幻灯片按钮时（返回到没有视频的第一张幻灯片），音乐会淡入并播放

这是你的电话号码

这是我的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");
     }

});

好了：

$('#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();

脚本现在所做的是查看下一个打开的accordion选项卡是否具有id“one”。在这种情况下，将播放音乐。如果打开任何其他选项卡，音乐将暂停。 播放器使用

切换背景音乐（）

方法进行切换

如果您想添加更多选项卡并播放/暂停音乐，只需在

#go

元素的onClick函数中编辑if子句即可

工作演示位于：

编辑： 并具有新的静音功能：

编辑-2: 淡出固定：

---

谢谢你的帮助。只有一个问题。当音乐已处于静音状态时，单击“下一步”按钮，它仍处于静音状态，这很好，但如果再次按下该按钮以返回第一张幻灯片，音乐将开始播放。这是不应该的。因为在他们去另一张幻灯片之前，它没有播放。我想用一个变量添加一个if条件，如果音乐正在播放，按下next按钮，或者它没有播放，按下按钮，则为true。你对此有什么想法吗？好吧，使用变量

静音

绝对是一个好方法。我认为具体的解决方案还取决于其他一些事情。用户是否应该能够通过youtube视频取消静音并播放页面上的背景音乐？真的没有。这并不重要。唯一的问题是，如果音乐已经处于静音状态，那么在重新打开第一张幻灯片后，音乐就不能播放。如果它正在播放，那么它必须在幻灯片中暂停，然后在移动到幻灯片时再次播放。好的，我认为更新添加了请求的行为。在玩之前，我只需检查玩家是否静音。我们现在使用mute（）和unmute（）方法，而不是使用play方法切换mute按钮。您只需在淡出后移动

pause（）

即可开火。在前面的解决方案中，我们首先暂停播放器，然后开始淡出；-）