雖然界面很簡(jiǎn)單,但是一個(gè)音頻播放器該有的功能大部分都有了(沒有歌詞顯示功能).
主要實(shí)現(xiàn)的功能有:
1.實(shí)現(xiàn)音頻播放,暫停;
2.實(shí)現(xiàn)拖拽進(jìn)度條,快進(jìn)音頻進(jìn)度;
3.實(shí)現(xiàn)上一首,下一首,列表循環(huán)播放;
4.實(shí)現(xiàn)關(guān)閉小程序,也可在后臺(tái)播放,正式版需要通過審核,開發(fā)版本可正常測(cè)試;
一丶index.js
數(shù)據(jù)初始化
/**
? * 頁面的初始數(shù)據(jù)
? */data:{playStatus:true,audioIndex:0,progress:0,duration:0,audioList:[],showList:true},/**
? * 生命周期函數(shù)--監(jiān)聽頁面加載
? */onLoad:function(options){this.setData({audioList:data})this.playMusic();},
playMusic切換播放歌曲的方法.
playMusic:function(){letaudio=this.data.audioList[this.data.audioIndex];letmanager=wx.getBackgroundAudioManager();manager.title=audio.name||"音頻標(biāo)題";manager.epname=audio.epname||"專輯名稱";manager.singer=audio.author||"歌手名";manager.coverImgUrl=audio.poster;// 設(shè)置了 src 之后會(huì)自動(dòng)播放manager.src=audio.src;manager.currentTime=0;letthat=this;manager.onPlay(function(){console.log("======onPlay======");that.setData({playStatus:true})that.countTimeDown(that,manager);});manager.onPause(function(){that.setData({playStatus:false})console.log("======onPause======");});manager.onEnded(function(){console.log("======onEnded======");that.setData({playStatus:false})setTimeout(function(){that.nextMusic();},1500);});},
countTimeDown循環(huán)計(jì)時(shí),進(jìn)度展示
//循環(huán)計(jì)時(shí)
countTimeDown:function(that,manager,cancel){if(that.data.playStatus){setTimeout(function(){if(that.data.playStatus){// console.log("duration: " + manager.duration);// console.log(manager.currentTime);that.setData({progress:Math.ceil(manager.currentTime),progressText:that.formatTime(Math.ceil(manager.currentTime)),duration:Math.ceil(manager.duration),durationText:that.formatTime(Math.ceil(manager.duration))})that.countTimeDown(that,manager);}},1000)}},
sliderChangeslider的拖拽事件
//拖動(dòng)事件
sliderChange:function(e){letmanager=wx.getBackgroundAudioManager();manager.pause();manager.seek(e.detail.value);this.setData({progressText:this.formatTime(e.detail.value)})setTimeout(function(){manager.play();},1000);},
lastMusic上一首
//上一首
lastMusic:function(){let audioIndex=this.data.audioIndex>0?this.data.audioIndex-1:this.data.audioList.length-1;this.setData({audioIndex:audioIndex,playStatus:false,progress:0,progressText:"00:00",durationText:"00:00"})setTimeout(function(){this.playMusic();}.bind(this),1000);},
playOrpause中間的按鈕,播放/暫停切換
//播放按鈕
playOrpause:function(){letmanager=wx.getBackgroundAudioManager();if(this.data.playStatus){manager.pause();}else{manager.play();}},
nextMusic下一首
//下一首
nextMusic:function(){let audioIndex=this.data.audioIndex<this.data.audioList.length-1?this.data.audioIndex+1:0;this.setData({audioIndex:audioIndex,playStatus:false,progress:0,progressText:"00:00",durationText:"00:00"})setTimeout(function(){this.playMusic();}.bind(this),1000);},
listClick列表點(diǎn)擊事件
//列表點(diǎn)擊事件
listClick:function(e){let pos=e.currentTarget.dataset.pos;if(pos!=this.data.audioIndex){this.setData({audioIndex:pos,showList:false})this.playMusic();}else{this.setData({showList:false})}},
界面切換,時(shí)長(zhǎng)格式化
//界面切換
pageChange:function(){this.setData({showList:true})},
//格式化時(shí)長(zhǎng)
formatTime:function(s){lett='';s=Math.floor(s);if(s>-1){letmin=Math.floor(s/60)%60;letsec=s%60;if(min<10){t+="0";}t+=min+":";if(sec<10){t+="0";}t+=sec;}returnt;},
二丶index.wxml
<!--index.wxml-->
<viewclass="container"><viewwx:if="{{showList}}"class="list"><viewwx:for="{{audioList}}"class='item {{audioIndex==index?"active":""}}'bindtap='listClick'data-pos='{{index}}'><view>{{item.name}}</view><text>{{item.author}}</text></view></view><viewwx:elseclass='background'><viewclass='info'><view>{{audioList[audioIndex].name||""}}</view><view>{{audioList[audioIndex].author||""}}</view></view><imageclass='list'bindtap='pageChange'src='/images/list.png'></image><imageclass='poster {{playStatus?"rotate":"rotate-paused"}}'mode="scaleToFill"src='{{audioList[audioIndex].poster}}'></image><viewclass='progress'><text>{{progressText}}</text><sliderclass='bar'bindchange="sliderChange"bindchanging="sliderChanging"value="{{progress}}"step="1"min='0'max='{{duration}}'activeColor="#1aad19"block-size="12"block-color="#1aad19"/><text>{{durationText}}</text></view><viewclass='buttons'><imageclass='button'bindtap='lastMusic'src='/images/last.png'></image><imageclass='button'bindtap='playOrpause'src='{{playStatus?"/images/pause.png":"/images/play.png"}}'></image><imageclass='button'bindtap='nextMusic'src='/images/next.png'></image></view></view></view>
三丶index.wxss
/**index.wxss**/
.item{border:1rpx solid #eee;padding:10rpx;font-size:11pt;}.active{background:#a51515;color:#fff;}.background{position:fixed;left:0;top:0;right:0;bottom:0;text-align:center;background:#f5f5f5;}.background .info{position:fixed;top:140rpx;left:0;right:0;font-size:12pt;color:#353535;}.background .list{position:fixed;right:40rpx;top:40rpx;width:60rpx;height:60rpx;}.background .poster{width:150rpx;height:150rpx;border-radius:50%;margin-top:400rpx;}.rotate{animation:rotate 10s linear infinite;}.rotate-paused{animation:rotate 10s linear infinite;animation-play-state:paused;}@keyframesrotate{0%{transform:rotate(0deg);}50%{transform:rotate(180deg);}100%{transform:rotate(360deg);}}.progress{position:fixed;bottom:90rpx;left:50rpx;right:50rpx;display:flex;align-items:center;font-size:10pt;color:rgb(87,49,49);text-align:center;}.progress .bar{flex:1;}.progress text{flex-basis:90rpx;}.buttons{position:fixed;bottom:20rpx;left:50rpx;right:50rpx;display:flex;justify-content:space-around;align-items:center;}.buttons .button{width:70rpx;height:70rpx;}
四丶要實(shí)現(xiàn)關(guān)閉小程序后,依然后臺(tái)播放,微信頂部懸浮展示,需要再app.json配置requiredBackgroundModes屬性
