2023年7月17日发(作者：)

微信⼩程序第三章“⾳乐”⼩程序项⽬“⾳乐”⼩程序项⽬已经更新，可以在⼿机上进⾏调试1. 图⽚利⽤图床⽣成在线链接2. ⽹易云⾳乐MP3地址为/song/media/outer/url?id= ？.mp3学习⽬标1. 掌握swiper组件的使⽤2. 掌握scroll-view组件的使⽤3. 掌握image组件的使⽤4. 掌握slider组件的使⽤5. 掌握⾳频API的使⽤具体使⽤请看开发前准备项⽬展⽰

项⽬分析页⾯结构页⾯由上、中、下三个区域组成（tab，content，player）content通过左右滑动可以实现标签页的转换⾳乐推荐向⽤户推荐热门⾳乐播放器显⽰当前播放进度，⽤户可以跳转进度播放列表显⽰当前播放的曲⽬列表，⽤户可以进⾏曲⽬切换player三个按钮 打开播放列表 播放暂停 切换到下⼀曲⽬录结构 标签页切换–index页⾯ ⾳乐推荐 播放器 播放列表 {{}} {{}}

if="{{state=='paused'}}" src="../images/" bindtap="play" />else src="../images/" bindtap="pause" /> ⾳乐推荐 私⼈FM 每⽇歌曲推荐 云⾳乐新歌榜 推荐歌曲 {{}} 播放器页⾯ {{}} —— {{}} —— {{tTime}} {{on}} 播放列表

{{}} {{}}

if="{{index==playIndex}}">正在播放for="{{playlist}}" key="id" bindtap="change" data-index="{{index}}"> 逻辑⽂件数据data: { item:0, tab:0, playlist:[ {id:1,title:'有何不可',singer:'许嵩',src:'/pages/mp3/3',coverImgUrl:'../images/'}, {id:2,title:'Love Story',singer:'Taylor swift',src:'/pages/mp3/3',coverImgUrl:'../images/'}, {id:3,title:'⽆⼈之岛(Cover 任然)',singer:'鸣⼩明',src:'/pages/mp3/3',coverImgUrl:'../images/'}, {id:4,title:'云烟成⾬',singer:'房东的猫',src:'/pages/mp3/3',coverImgUrl:'../images/'}, {id:5,title:'⼩幸运',singer:'刘烨',src:'/pages/mp3/3',coverImgUrl:'../images/'}, {id:6,title:'理想三旬',singer:'陈鸿宇',src:'/pages/mp3/3',coverImgUrl:'../images/'} ], state:'paused', playIndex:0, play:{currentTime:'00:00',duration:'00:00',percent:0,title:'',singer:'',coverImgUrl:'../images/'}},//⾳频对象audioCtx:null函数//tab绑定事件--滑动contentchangeItem:function(e){a({item:})},changeItem:function(e){a({item:})},//content swiper绑定事件

改变tabchangeTab:function(e){a({tab:t})},//加载页⾯时执⾏onReady:function(){ tx = InnerAudioContext(); var that=this; //

播放失败检测 r(function(){('播放失败：'+);}) //

播放完成⾃动换下⼀曲 d(function(){();}) //

⾃动更新播放速度 (function(){}) Update(function(){ a({ 'tTime':Time(tTime), 'on':Time(on), 't':tTime/on*100 }) }) //

默认第⼀曲 ic(0);},//

格式化时间formatTime:function(time){ var minute=(time/60)%60; var second=(time)%60; return (minute<10?'0'+minute:minute)+":"+(second<10?'0'+second:second)},//根据index切换当前播放曲⽬setMusic:function(index){ var music=st[index]; =; a({playIndex:index,'':,'':,'mgUrl':mgUrl,'tTime':'00:00','on':'00:00','t':0})},//切换到播放列表changePage:function(e){ a({ item:, tab: })},//播放曲⽬play:function(){ (); a({state:'running'})},//暂停曲⽬pause:function(){ (); a({state:'paused','on':Time(on)})},//播放下⼀⾸next:function(){ var index=dex>=-1?0:dex+1; ic(index); d(0);//此处请看下⾯的format函数},//改变进度条，改变当时播放时长sliderChange:function(e){ var second=*on/100; d(second);//此处请看下⾯的format函数},//单击播放列表，改变播放曲⽬change:function(e){change:function(e){ ic(); d(0);//此处请看下⾯的format函数},本⼈的bug由于 跳转时长不会更新,请看解决forward:function(second){ ();//

先暂停 (second);//

再跳转 setTimeout(() => {();}, 500);//

延时播放})由于路径播放不成功问题，请看使⽤绝对路径