微信小程序学习笔记(九)音乐播放器(下一曲、上一曲、自动下一曲)
微信小程序学习笔记(九)音乐播放器(下一曲、上一曲、自动下一曲) 要实现自动下一曲、下一曲、上一曲功能,实现列表的循环播放,必须清楚当前播放的是列表中的第几首歌。因此,在程序中设置一个数据记录当前播放的歌曲是列表中的第几首歌曲的数组下标,从而实现以上功能。 一、自动下一曲 在musicdemo.js的data中添加currentIndex数据。 data: { /**当前播放的列表中的歌曲的下标 */ currentIndex:0, 在onLoad函数中,添加如下代码 //自动播放下一曲 this.data.musicCtx.onEnded(()=>{ //下一曲,即让当前的数组下标加1 var index=this.data.currentIndex; index++; if(index>=this.data.musicList.length){ index=0;//当播放完列表中最后一首歌后,从头开始循环列表 } console.log(index) this.setData({ currentIndex:index }) this.data.musicCtx.src=this.data.musicList[index].musicSrc;//开始播放 }) 此时,发现当点击列表的歌曲时,虽然可以自动播放下一曲,但是播放的歌曲却是错误的,原因是点击播放列表中的歌曲时