實例：一個簡單的播放器效果。 實現(xiàn)的功能： 1點擊播放按鈕。音頻開始播放。 2播放的同時，進度條在不停的更新走動 3點擊暫停按鈕，音頻停止播放 4當音頻播放完畢以后，進度條再次回到原點 5當拖滑動滑塊以后，松開滑塊，進度條繼續(xù)走動，音頻從滑塊松開的位置播放，直至播放結(jié)束 html： <!--進度條--> <viewclass="progresswrap"><sliderclass="drag"step="10"value="{{curTimeVal}}"max="{{duration}}"backgroundColor="#373636"activeColor="#FF1744"bindchange="slideBar"/></view><!--控制按鈕--> <viewclass="btns"><viewbindtap='play'><imagesrc="{{playSrc}}"></image></view><viewbindtap='pause'><imagesrc="{{pauseSrc}}"></image></view></view>
jsconst innerAudioContext = wx.createInnerAudioContext(); Page({duration:0,curTimeVal:0,})onLoad: function:(){wx.request({url: utils.baseUrl + "/message/get?sessionID=" + sessionID + "&id=" + id,success: function (res) {var resData = res.data.datavar audioSrc ="https://www.rujian.vip"+resData.resourceURL;that.setData({contResponseArr: resData,audioSrc: audioSrc})innerAudioContext.src = audioSrc;}})},play: function (e) {var that=this;innerAudioContext.play();innerAudioContext.onPlay((res) =>that.updateTime(that)}) //沒有這個事件觸發(fā)，無法執(zhí)行updatatime}pause:function(){innerAudioContext.pause();},updateTime:function(that){innerAudioContext.onTimeUpdate((res) => {//更新時把當前的值給slide組件里的value值。slide的滑塊就能實現(xiàn)同步更新console.log("duratio的值：", innerAudioContext.duration)that.setData({duration: innerAudioContext.duration.toFixed(2) *100,curTimeVal: innerAudioContext.currentTime.toFixed(2) *100,})})//播放到最后一秒
if (innerAudioContext.duration.toFixed(2) - innerAudioContext.currentTime.toFixed(2) <= 0) {that.setStopState(that)}innerAudioContext.onEnded(() => {that.setStopState(that)})
},//拖動滑塊slideBar:function(e){let that=this;var curval=e.detail.value; //滑塊拖動的當前值innerAudioContext.seek(curval); //讓滑塊跳轉(zhuǎn)至指定位置innerAudioContext.onSeeked((res)=>{this.updateTime(that) //注意這里要繼續(xù)出發(fā)updataTime事件，})},setStopState:function(that){that.setData({curTimeVal: 0})innerAudioContext.stop()}

效果如下：

總結(jié)

以上是生活随笔為你收集整理的小程序实现播放器功能的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。