1.代码，每次轮播会播放对应音频
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.compop-word-card-swiper {
background: #5bba7f;
font-family: PingFangSC-Regular,Avenir,Helvetica,Arial,sans-serif;
}
.compop-word-card-swiper .title{
font-size: 18px;
color: white;
text-align: center;
padding: 23px 0;
text-align: center;
}
.compop-word-card-swiper .swiper-container {
width: 100%;
padding-bottom: 45px;
}
.compop-word-card-swiper .swiper-slide {
width: 80%;
text-align: center;
position: relative;
}
.compop-word-card-swiper .laba {
width: 25px;
position: absolute;
bottom: 20px;
left: 50%;
margin-left: -12.5px;
}
.compop-word-card-swiper .swiper-slide .img {
width: 89%;
margin: 0 auto;
}
.compop-word-card-swiper .swiper-pagination {
color: white;
font-size: 18px;
}
</style>
</head>
<body>
<div class="compop-word-card-swiper">
<div class="title">重点学习单词</div>
<div class="word-card-swiper"></div>
</div>
<script>
var data = [
{
text: 'bat',
audio: 'https://conan-online.fbcontent.cn/conan-oss-resource/15348326826277197.mp3',
img: 'https://conan-online.fbcontent.cn/conan-oss-resource/zebra-15439931040241142.png'
},
{
text: 'bug',
audio: 'https://conan-online.fbcontent.cn/conan-oss-resource/1534832699339860.mp3',
img: 'https://conan-online.fbcontent.cn/conan-oss-resource/zebra-15439931040241142.png'
},
{
text: 'cap',
audio: 'https://conan-online.fbcontent.cn/conan-oss-resource/15348327695334898.mp3',
img: 'https://conan-online.fbcontent.cn/conan-oss-resource/zebra-15439931040241142.png'
}
]
var labaImg = 'https://conan-online.fbcontent.cn/conan-oss-resource/zebra-15439963239648288.png'
var labaGif = 'https://conan-online.fbcontent.cn/conan-oss-resource/zebra-1543995066542814.gif'
var html = []
html.push('<div class="swiper-container">')
html.push('<div class="swiper-wrapper">')
var slideStr = ''
for (var i = 0; i < data.length; i++) {
slideStr += '<div class="swiper-slide">'
slideStr += '<img class="img" data-index="' + i + '" src="' + data[i].img + '"/>'
slideStr += '<img class="laba" src="' + labaImg + '"/>'
slideStr += '</div>'
}
html.push(slideStr)
html.push('</div>')
html.push('<div class="swiper-pagination"></div>')
html.push('</div>')
html.push('<audio id="audio" src="" style="height: 1px; visibility: hidden;"></audio>')
var wordcardDom = document.querySelector('.word-card-swiper').innerHTML = html.join('')
var audio = document.getElementById('audio')
var labaDom = null
var activeIndex = 0
var mySwiper = new Swiper ('.swiper-container', {
slidesPerView: "auto",
centeredSlides: !0,
watchSlidesProgress: !0,
pagination: {
el: '.swiper-pagination',
type: 'fraction'
},
on: {
touchStart: function (e) {
// 注意！起初只在touchStart事件里写了setTimout然后在里面播放音频，结果，在手机上音频都没有声音，目测跟swiper的某个机制有关。解决方法：去掉setTimeout，在touchStart和slideChange回调里都播放音频，可达到滑动播放+点击播放的目的。整个过程如下：touchstart事件先触发，表明用户介入愿意播放音频，但是音频的index计算不正确，然后立刻触发slideChange回调，替换成正确的音频并播放。这样滑动和点击的音频都是正确的。
var touchIndex = Number(e.target.getAttribute('data-index'))
// setTimeout(function () {
audio.src = data[activeIndex].audio
labaDom = document.querySelectorAll('.laba')[activeIndex]
labaDom.src = labaGif
audio.play()
// }, 200);
},
slideChange: function () {
activeIndex = this.activeIndex
audio.src = data[activeIndex].audio
labaDom = document.querySelectorAll('.laba')[activeIndex]
labaDom.src = labaGif
audio.play()
},
}
})
audio.onended= function () {
labaDom.src = labaImg
}
audio.onerror = function (err) {
console.log(err)
}
</script>
</body>
</html>2.结果
3.反思
// 注意！起初只在touchStart事件里写了setTimout然后在里面播放音频，结果，在手机上音频都没有声音，目测跟swiper的某个机制有关。解决方法：去掉setTimeout，在touchStart和slideChange回调里都播放音频，可达到滑动播放+点击播放的目的。整个过程如下：touchstart事件先触发，表明用户介入愿意播放音频，但是音频的index计算不正确，然后立刻触发slideChange回调，替换成正确的音频并播放。这样滑动和点击的音频都是正确的。