CODEWITHSUNDEEP
javascripthtmlaudiosliderhtml5-audio
jmwhite132
jmwhite132

Reputation: 63

How do I change audio source after changing slides?

So I've just started using the Slick Slider. It works pretty well but I'm having trouble changing the src in the html5 audioplayer after I switch slides. I have no clue how to go about this function. There are two carousels that are in sync with one another.

<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>

I expect the src for the audio player to change in the event of the carousel slides containing images sliding

Upvotes: 1

Views: 543

Answers (1)

zer00ne
zer00ne

Reputation: 44043

Any jQuery plugin worth their salt has documentation for options and methods. In general, we would first see if there's an option that facilitates the use of audio files ... nope, so then look for methods that bind to events (commonly referred to as "events" or "callbacks". In the Settings section under "Events" there are several custom events. When hooking into a custom event of a slider type plugin it's best to find an event associated with going to and from a slide --

  • we will use the beforeChange event which fires before slide change.

  • we have to write our own callback function to actually change an <audio> tag's src value when the user goes to the next slide (that's when the beforeChange event occurs).
    Signature: 

    $(SELECTOR).on('beforeChange', CALLBACK);

    Demo:

    $(".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>

Upvotes: 1

Related Questions