Воспроизведение аудио, если элемент имеет активный класс - jQuery, BX Slider

0

Я использую 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()},
Теги:
audio
bxslider

1 ответ

0

вы можете использовать следующий 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");
});
Поделиться
  • 0
    Большое спасибо за это. Тем не менее, мне нужно, чтобы аудиофайл автоматически воспроизводился в фоновом режиме без необходимости щелкать что-либо, когда содержащийся div имеет активный класс.
  • 0
    Вы можете привязать активное событие к документу, чтобы сделать это ...
Показать ещё 8 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню