Как изменить источник звука после смены слайдов?

Итак, я только начал использовать Slick Slider. Это работает довольно хорошо, но у меня возникают проблемы с изменением src в аудиоплеере html5 после переключения слайдов. Я понятия не имею, как работать с этой функцией. Есть две карусели, которые синхронизированы друг с другом.

<div>
    <audio controls class = "musicplayer" id = "oned">
        <source id = "song1" src = "#" type = "audio/mpeg"></source>
        <source id = "song2" src = "#" type = "audio/mpeg"></source>
    </audio>
</div>

<div class = "soapboxes" id = "wrapper">
    <div><img src = "images/pink and yellow [email protected]" class = "pinkandyellow" alt = "slider image" align = "center"  ></div>
    <div><img src = "images/green [email protected]" alt = "slider image" align = "center" ></div>
    <div><img src = "images/red [email protected]" alt = "slider image" align = "center" ></div>
    <div><img src = "images/pink [email protected]" alt = "slider image" align = "center" ></div>
</div>

<div class = "music" id = "wrapper">
    <div><p>Blah</p></div>
    <div><p>Blah1</p></div>
    <div><p>Blah2</p></div>
    <div><p>Blah3</p></div>
</div>

<script type= "text/javascript">
    $(document).ready(function() {
        $('.soapboxes').slick({
            dots: true,
            arrows: true,
            autoplay: false,
            centerMode: true,
            mobileFirst: true,
            initialSlide: 1,
            slidesToScroll:1,
            asNavFor: '.music',
            slidesToShow: 3,
        });
    });
</script>

<script type= "text/javascript">
    $(document).ready(function() {
        $('.music').slick({
            dots: false,
            arrows: true,
            autoplay: false,
            centerMode: true,
            accessibility: true,
            mobileFirst: true,
            initialSlide: 1,
            asNavFor:'.soapboxes'
        });
    });
</script>

Я ожидаю, что src для аудиоплеера изменится в случае слайдов карусели, содержащих изображения.

javascript html audio slider html5-audio

09.04.2019 01:32

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

194

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Любой достойный плагин jQuery имеет документация для опций и методов. В общем, мы бы сначала посмотрели, есть ли опция, облегчающая использование аудиофайлов... нет, так что потом ищите методы, которые привязываются к событиям (обычно называемые "Мероприятия" или "обратные вызовы". В Раздел настроек под "События" есть несколько пользовательских При подключении к пользовательскому событию плагина типа слайдера лучше всего найти событие, связанное с переходом на слайд и обратно --

мы будем использовать событие перед изменением, которое срабатывает перед сменой слайда.
мы должны написать нашу собственную функцию обратного вызова, чтобы фактически изменить значение источник тега <audio>, когда пользователь переходит к следующему слайду (именно тогда происходит событие перед изменением).
Подпись:
```
$(SELECTOR).on('beforeChange', CALLBACK); 
```
Демо:
```
$(".music").on("beforeChange", playlist);
```

<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8'>
  <link href = "https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel = "stylesheet">
  <link href = "https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" rel = "stylesheet">
  <style>
    body {
      overflow-x: hidden;
    }
    
    main {
      width: 100vw;
    }
    
    .slider,
    img {
      display: block;
      margin: 0 auto;
      text-align: center;
    }
    
    .player {
      width: 320px;
    }
  </style>
</head>

<body>
  <main>
    <div class = "main slider">
      <div><img src = "http://placeimg.com/320/180/people" alt = "slider image"></div>
      <div><img src = "http://placeimg.com/320/180/nature" alt = "slider image"></div>
      <div><img src = "http://placeimg.com/320/180/animals" alt = "slider image"></div>
    </div>

    <div class = "music slider">
      <div>Dog Days</div>
      <div>Jerky</div>
      <div>Righteous</div>
    </div>

    <audio class='player slider' src='http://soundbible.com/mp3/chinese-gong-daniel_simon.mp3' controls></audio>
  </main>

  <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
  <script>
    $('.main').slick({
      arrows: false,
      mobileFirst: true,
      asNavFor: '.music'
    });

    $('.music').slick({
      mobileFirst: true,
      asNavFor: '.main'
    });

    $('.music').on('beforeChange', playlist);

    function playlist(e, s, current, next) {

      var list = [
        'https://glsbx.s3.amazonaws.com/-/dd.mp3',
        'https://od.lk/s/NzlfOTEyMzgyNF8/jerky.mp3',
        'https://od.lk/s/NzlfOTEwMzM5OV8/righteous.mp3'
      ];

      $('.player')[0].src = list[next];
      $('.player')[0].load();
      $('.player')[0].play();

    }
  </script>
</body>

</html>

Работает отлично! Большое спасибо. Для всех, кто сталкивается с этим, перемещение тега <audio control> за пределы тега </main> может помочь, если вы застряли

— 10.04.2019 01:27

09.04.2019 04:36