一个微信小程序音频列表播放的页面遇到的坑及实现代码

不说别的，先上效果图。表示微信小程序createAudioContext的坑真的是成堆成堆的。

 

坑一：ios动态更换音频播放地址后 onCanplay 不执行

这个bug至今无解，当然这里也就不累赘onCanplay不加timeout获取不到音频总时长了，事实是就算加了ios也获取不到第二条音频的总时长，但是安卓没问题。直接说解决方案吧。

楼主比较幸运，展示的音频有限，本来也是指望onCanplay动态获取音频总长的，后来没办法直接提前获取到写死代码里了。至于切换音频之后更改右下角显示的总时长，这部分代码写到了onplay里

 

坑二：onxxx 事件需要取消监听

不取消的后果是什么呢？就是下次点击的时候前几次监听的事件一起触发。

 

 

下面是代码：

wxss:

/* inner/pages/sleep/sleep.wxss */
@import "../../../templates/loading/loading.wxss";

page{background: #efeff4;}
.container{width: 750rpx;}


/* fullBg */
.fullBg{padding: 50rpx 30rpx 150rpx;}
.fullBg .eachFull{width: 330rpx;position: relative;margin: 15rpx 0;}
.fullBg .eachFull:nth-child(2n-1){float: left;}
.fullBg .eachFull:nth-child(2n){float: right;}

.sleepBg{display:block;width: 100%;height: 350rpx;border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;position: relative;}
.sleepBg image{width: 100%;height: 100%;display: block;border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;}
.sleepBg .sleepCover{width: 100%;height: 100%;position: absolute;background: rgba(255, 255, 255, .15);border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;top: 0;left: 0;}
.sleepCont{width: 100%;padding: 30rpx 20rpx;border-bottom-left-radius: 20rpx;border-bottom-right-radius: 20rpx;box-sizing: border-box;background: #fff;}
.sleepCont text{display: block;float: left;line-height: 50rpx;width: 220rpx;}
.sleepCont image{display: block;float: right;width: 50rpx;height: 50rpx;}


/* player */
.player{width: 750rpx;position: fixed;bottom: 0;left: 0;height: 120rpx;border-top: 1rpx solid #ccc;text-align: center;box-sizing: border-box;background: #fff;}
.musicBg{width: 750rpx;height: 120rpx;display: block;}
.musicBg image{width: 750rpx;height: 120rpx;display: block;}
.playerBtns{width: 750rpx;height: 120rpx;position: absolute;top: 0;left: 0;padding-top: 10rpx;}
.leftAdjust{margin-left: 20rpx;}
.leftAdjust.lastAdjust{margin-right: 10rpx;margin-left: 10rpx;}
.playerAdjust{width: 80rpx;height: 80rpx;float: left;margin-top: 10rpx;}
.playerHandler{float: left;}
.playerHandler image{width: 100rpx;height: 100rpx;display: block;}
.progressBar{float: right;width: 250rpx;height: 10rpx;border-radius: 10rpx;background: #ccc;margin-top: 40rpx;margin-right: 20rpx;position: relative;}
.progressBarInner{position: absolute