播放音頻，如果元素有活躍的類 - jQuery，BX Slider

Question

我使用BX Slider滾動瀏覽內容，每張幻燈片上都需要有一個音頻文件（當前是HTML5），當相應的幻燈片處於活動狀態時會自動播放我已經授予班級「活動幻燈片」在幻燈片中）。如果存在正在播放的音頻文件，則需要在加載新文件之前將其取消/停止。

我無法提供任何與音頻文件相關的現有代碼，因爲我不知道從哪裏開始！

如果有人可以幫助，這將不勝感激，非常感謝。

BXSlider具有以下功能還，如果這能幫助：

http://bxslider.com/options

編輯：增加了現有的代碼。

<ul class="bxslider group"> 
<li> 
    <div class="container" id="section1"> 
     ... 
    </div> 
</li> 
<li> 
    <div class="container" id="section2"> 
    <audio src="/assets/audio/02.mp3" id="section2Audio"></audio> 
     ... 
    </div> 
</li> 
<li> 
    <div class="container" id="section2-1"> 

    <audio src="/assets/audio/05.mp3" id="section3Audio"></audio> 
     ... 
    </div> 
</li> 

滑塊功能

onSlideAfter: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) { 
    console.log(currentSlideHtmlObject); 
    $('.active-slide').removeClass('active-slide'); 
    $('.bxslider>li').eq(currentSlideHtmlObject + 0).addClass('active-slide')}, 

onSliderLoad: function() { 
    $('.bxslider>li').eq(0).addClass('active-slide');}, 

onSlideNext: function() { 
$('audio').each(function(){ 
     this.pause(); // Stop playing 
     this.currentTime = 0; // Reset time 
}); 

$("audio").get(0).play()}, 

Answer 1

您可以使用下面的jQuery來實現播放音頻爲：活動類

$(element).on({ 
    focus: function (e) { 
     if ($(element).hasClass("active-slide")) { 
      //play audio 
      // $('nonactiveElement').removeClass("active-slide"); 
      // stop audio on #nonactiveElement 
     } 
    }, 
    blur: function (e) { 
     // do something else entirely for blur 
    }, 
    ... 
} 

例子：

我創建Jsfiddle中的示例：http://jsfiddle.net/VRZR8/1/

$('.next').on("click", function() { 
    var activeDiv = $('.active-slide'); 
    $(activeDiv).removeClass("active-slide"); 
    $(activeDiv).parent().next().find(".slide").addClass("active-slide"); 
}); 


$('.prev').on("click", function() { 
    var activeDiv = $('.active-slide'); 
    $(activeDiv).removeClass("active-slide"); 
    $(activeDiv).parent().prev().find(".slide").addClass("active-slide"); 
});