更改幻灯片后如何更改音频源？

Question

所以我刚刚开始使用 Slick Slider。它工作得很好，但我在切换幻灯片后无法更改 html5 音频播放器中的 src。我不知道如何去实现这个功能。有两个轮播相互同步。

<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 trend@0.75x.png" class="pinkandyellow" alt="slider image" align="center"  ></div>
    <div><img src="images/green trend@0.75x.png" alt="slider image" align="center" ></div>
    <div><img src="images/red trend@0.75x.png" alt="slider image" align="center" ></div>
    <div><img src="images/pink trend@0.75x.png" 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 在包含图像的轮播幻灯片滑动时发生变化

Answer 1

任何值得称道的 jQuery 插件都有 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 在 "Events" 下有几个自定义事件。当连接到滑块类型插件的自定义事件时，最好找到与幻灯片关联的事件 --

我们将使用 beforeChange 事件，它在幻灯片切换之前触发。
我们必须编写自己的回调函数来实际更改 <audio> 标记的 src 值当用户转到下一张幻灯片时（即 beforeChange 事件发生时）。
签名：
```
$(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>

更改幻灯片后如何更改音频源？

How do I change audio source after changing slides?

html

javascript

audio

slider

html5-audio