微信小程序多音頻播放進(jìn)度條問題
真的腦子疼，小程序的音頻組件居然沒有進(jìn)度控制的功能，網(wǎng)上的方法又很少，邏輯通了就好寫了。
成都創(chuàng)新互聯(lián)主要從事成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)臨淄,10年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):028-86922220
1.所有音頻播放、停止按鈕使用狀態(tài)切換控制
2.當(dāng)點(diǎn)擊某個(gè)音頻播放時(shí)，首先將所有音頻的狀態(tài)置為停止?fàn)顟B(tài)，然后將當(dāng)前音頻置為播放狀態(tài)
3.滾動(dòng)條插件配合音頻控件一起使用
4.播放狀態(tài)時(shí)滾動(dòng)條的長度隨音頻進(jìn)度變化而變化，時(shí)間也要顯示
5.拖動(dòng)滾動(dòng)條時(shí)，音頻的當(dāng)前時(shí)間隨滾動(dòng)條變化而變化
1.wxml
<text class="left_text">{{item.currentProcess}}</text>
<slider class="slider_middle" bindchange="changeSlide" bindtouchstart="start" bindtouchend="end" max="{{item.totalProcessNum}}" min="0" value="{{item.currentProcessNum}}" disabled="{{item.canSlider}}" block-size ="18" data-index="{{index}}"></slider>
<text class="right_text">{{item.totalProcess}}</text>
<image class="audio_btn" wx:if="{{!item.showAudio}}" src="../assets/play.png" data-src="{{item.src}}" bindtap="playAudio" data-index = "{{index}}"></image>
<image class="audio_btn" wx:else src="../assets/pause.png" bindtap="pauseAudio" data-index = "{{index}}"></image>2.js
videoControl(e) {//控制視頻播放，需求更改后暫時(shí)無用
let src = e.currentTarget.dataset.src
let img = e.currentTarget.dataset.post
let data = this.data.cc
let that = this
if (this.data.innerAudioContext2){
that.data.innerAudioContext2.stop()
}
if (this.data.innerAudioContext) {
that.data.innerAudioContext.stop()
that.setUser(that.data.oldid, false)
}
for(var i = 0;i<data.length;i++){
if (data[i].type == '2'){
data[i].play = true
}
}
this.setData({
cc:data
})
if(this.data.type){
wx.navigateTo({
url: '/pages/record/record?cid=' + this.data.cid + '&src=' + src + '&img=' + img + '&type="share"'
})
}else{
wx.navigateTo({
url: '/pages/record/record?cid=' + this.data.cid + '&src=' + src + '&img=' + img
})
}
},
audioControl(e) {//控制課程音頻播放，需求更改后暫時(shí)無用
let index = e.currentTarget.dataset.index
let that = this
let data = this.data.cc
if (this.data.innerAudioContext) {
that.data.innerAudioContext.stop()
that.setUser(that.data.oldid, false)
}
for (var i = 0; i < data.length; i++) {
if (data[i].type == '2' && i != index) {
data[i].play = true
} else if (data[i].type == '2') {
data[i].play = false
} if (data[i].type == '3') {
data[i].play = true
}
}
if (!that.data.innerAudioContext2) {//第一次點(diǎn)擊音頻
that.data.innerAudioContext2 = wx.createInnerAudioContext();
that.data.innerAudioContext2.src = e.currentTarget.dataset.srcs
that.data.innerAudioContext2.play()
that.data.innerAudioContext2.onPlay(()=>{
})
that.data.innerAudioContext2.onStop(() => {
})
that.setData({//記錄當(dāng)前點(diǎn)擊項(xiàng)和上次點(diǎn)擊項(xiàng)
newid2: e.currentTarget.dataset.index,
oldid2: that.data.newid2 ? that.data.newid2 : index
})
} else {//非第一次點(diǎn)擊
let old = that.data.newid2
that.setData({
newid2: index,
oldid2: old
})
if (that.data.oldid2 != index ) {
that.data.innerAudioContext2.stop()
that.data.innerAudioContext2.src = e.currentTarget.dataset.srcs
that.data.innerAudioContext2.play()
}else{
if (that.data.innerAudioContext2.paused){
that.data.innerAudioContext2.stop()
that.data.innerAudioContext2.src = e.currentTarget.dataset.srcs
that.data.innerAudioContext2.play()
}else{
that.data.innerAudioContext2.stop()
for (var i = 0; i < data.length; i++) {
data[i].play = true
}
}
}
}
this.setData({
cc: data
})
},
playAudio(e){//帶滾動(dòng)條多個(gè)音頻處理問題
let that = this
let arr = that.data.cc
let index = e.currentTarget.dataset.index
if (that.data.audio) {//將所有的音頻停止
that.data.audio.pause()
}
for(let i=0;i<arr.length;i++){//將所有的音頻置為停止?fàn)顟B(tài)
that.setAudioType(i,false,true)
}
that.setAudioType(index,true,false)//將當(dāng)前音頻置為播放狀態(tài)
that.data.audio = wx.getBackgroundAudioManager();//初始化音頻并播放
that.data.audio.src = e.currentTarget.dataset.src
that.data.audio.title = '泰格英語'
that.data.audio.epname = '泰格英語'
that.data.audio.autoplay = true
that.data.audio.play();
//音頻開始播放的時(shí)間
if (arr[index].currentProcessNum != 0){
that.data.audio.startTime = arr[index].currentProcessNum
}
//音頻自然播放結(jié)束
that.data.audio.onEnded(function name(params) {
that.setCurrent(index, "00:00", 0)
that.setAudioType(index,false,false)
})
//音頻進(jìn)度播放更新
that.data.audio.onTimeUpdate(function () {
//設(shè)置總時(shí)長
if(arr[index].totalProcess == '00:00' || arr[index].totalProcessNum == '00:00'){
that.setTotal(index,that.time_to_sec(that.data.audio.duration), that.data.audio.duration)
}
//沒有觸動(dòng)滑動(dòng)事件更新進(jìn)度
if(!arr[index].isMove){
that.setCurrent(index,that.time_to_sec(that.data.audio.currentTime), that.data.audio.currentTime)
}
})
},
//開始滑動(dòng)觸發(fā)
start : function (e) {
let arr = this.data.cc
let index = e.currentTarget.dataset.index
this.move(index,true)
},
//觸發(fā)滑動(dòng)條
changeSlide : function (e) {
let that = this
let arr = that.data.cc
let index = e.currentTarget.dataset.index
const position = e.detail.value
let seek = arr[index].seek
seek = position
if (seek != -1) {
wx.seekBackgroundAudio({
position: Math.floor(position),
})
seek = -1
}
that.setCurrent(index,that.time_to_sec(position), position)
that.seek(index,seek)
},
//結(jié)束滑動(dòng)觸發(fā)
end : function (e) {
let arr = this.data.cc
let index = e.currentTarget.dataset.index
this.move(index, false)
},
//停止播放音頻
pauseAudio:function (e) {
let that = this
let index = e.currentTarget.dataset.index
that.data.audio.pause()
that.setAudioType(index,false,true)
},
//設(shè)置音頻圖片狀態(tài)以及滾動(dòng)條可播放狀態(tài)函數(shù)
setAudioType: function (index, tag, tagSlide, ) {
let that = this
let arrs = that.data.cc
arrs[index].showAudio = tag
arrs[index].canSlider = tagSlide
that.setData({
cc:arrs
})
},
//設(shè)置音頻當(dāng)前播放時(shí)間以及滾動(dòng)條當(dāng)前位置函數(shù)
setCurrent: function (index,currentProcess, currentProcessNum) {
let that = this
let arrs = that.data.cc
arrs[index].currentProcess = currentProcess
arrs[index].currentProcessNum = currentProcessNum
that.setData({
cc: arrs
})
},
//設(shè)置音頻總播放時(shí)間以及滾動(dòng)條總位置函數(shù)
setTotal: function (index,totalProcess, totalProcessNum) {
let that = this
let arrs = that.data.cc
arrs[index].totalProcess = totalProcess
arrs[index].totalProcessNum = totalProcessNum
that.setData({
cc: arrs
})
},
//設(shè)置滾動(dòng)條是否滾動(dòng)狀態(tài)函數(shù)
move:function (index,isMove) {
let that = this
let arrs = that.data.cc
arrs[index].isMove = isMove
that.setData({
cc: arrs
})
},
//設(shè)置音頻時(shí)間點(diǎn)函數(shù)
seek: function (index, seek) {
let that = this
let arrs = that.data.cc
arrs[index].seek = seek
that.setData({
cc: arrs
})
},總結(jié)
以上所述是小編給大家介紹的微信小程序多音頻播放進(jìn)度條問題，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持！
網(wǎng)頁標(biāo)題：微信小程序多音頻播放進(jìn)度條問題
當(dāng)前地址：http://chinadenli.net/article48/ipcohp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、網(wǎng)站營銷、定制網(wǎng)站、標(biāo)簽優(yōu)化、、自適應(yīng)網(wǎng)站
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)
- 成都建站公司認(rèn)為網(wǎng)站建設(shè)的三大基礎(chǔ)標(biāo)準(zhǔn) 2023-02-20
- 上海建站公司那么多，誰家好啊 2020-11-11
- 做一個(gè)優(yōu)質(zhì)的網(wǎng)站找一家專業(yè)的建站公司 2021-11-10
- 德陽網(wǎng)站建設(shè)如何挑選建站公司？ 2022-05-12
- 建站公司該如何做好商城網(wǎng)站建設(shè)？ 2015-08-06
- 廣州建站公司企業(yè)建站的重要性 2015-12-12
- 如何選擇一個(gè)專業(yè)的建站公司 2021-11-07
- 網(wǎng)站建設(shè)哪個(gè)公司好？怎么判斷一個(gè)靠譜的建站公司？ 2015-11-26
- 如何選擇優(yōu)質(zhì)建站公司 2017-09-28
- 成都建站公司的如何挑選？ 2023-01-20
- 為什么現(xiàn)在都選擇專業(yè)建站公司做網(wǎng)站？ 2022-03-26
- 成都建站公司哪家好，性價(jià)比哪個(gè)公司好？ 2016-01-24