更换幻灯片后如何更换音源？
Posted
技术标签:
【中文标题】更换幻灯片后如何更换音源？【英文标题】：How do I change audio source after changing slides? 【发布时间】：2019-04-08 23:32:10 【问题描述】：所以我刚刚开始使用 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" align="center" ></div>
<div><img src="images/green trend@0.75x.png" align="center" ></div>
<div><img src="images/red trend@0.75x.png" align="center" ></div>
<div><img src="images/pink trend@0.75x.png" 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 在包含图像滑动的轮播幻灯片发生变化时发生变化
【问题讨论】：
【参考方案1】：任何物超所值的 jQuery 插件都有documentation 用于选项和方法。一般来说，我们首先会看看是否有一个选项可以方便使用音频文件......没有，然后寻找绑定到事件的方法（通常称为 "events" 或 “回调”。在 “事件” 下的 Settings section 中有几个自定义事件。当挂钩到滑块类型插件的自定义事件时，最好找到与往返幻灯片 --
我们将使用在幻灯片更改之前触发的 beforeChange 事件。
我们必须编写自己的回调函数，以便在用户转到下一张幻灯片时（即 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" ></div>
<div><img src="http://placeimg.com/320/180/nature" ></div>
<div><img src="http://placeimg.com/320/180/animals" ></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>【讨论】：
完美运行！非常感谢。对于遇到此问题的任何其他人，如果您遇到问题，将 标签移到 标签之外可能会有所帮助以上是关于更换幻灯片后如何更换音源？的主要内容，如果未能解决你的问题，请参考以下文章