微信小程序使用slider實現(xiàn)音頻進(jìn)度條
眾所周知哈,微信小程序里面的音頻播放是沒有進(jìn)度條的,但最近有個項目呢,客戶要求音頻要有進(jìn)度條控制,所以就想到了用slider來實現(xiàn)音頻的進(jìn)度條顯示及控制
微信小程序的slider組件,效果如圖:
長的跟進(jìn)度條還是蠻相似的。
下面上代碼
slider是進(jìn)度條,bindchange是slider的拖動事件,playtime 已播放時間,alltime 總時間
<view class='slider'> ? ? <slider bindchange='sliderChange' activeColor='red' block-size="12" value='{{audioTime}}' /> </view> <view class='time'> ? ? {{playtime}} / {{alltime}} </view>
首先要初始化一個音頻播放器,然后要獲取音頻的總時長duration,然后需要把這個時長轉(zhuǎn)換成00:00這樣的格式顯示
var _self = this; var innerAudioContext = this.data.innerAudioContext; innerAudioContext.onCanplay(() => { ? ?//初始化duration ? innerAudioContext.duration ? setTimeout(function () { ? ? ? //延時獲取音頻真正的duration ? ? ? var duration = innerAudioContext.duration; ? ? ? var min = parseInt(duration / 60); ? ? ? var sec = parseInt(duration % 60); ? ? ? if (min.toString().length == 1) { ? ? ? ? min = `0${min}`; ? ? ? } ? ? ? if (sec.toString().length == 1) { ? ? ? ? sec = `0${sec}`; ? ? ? } ? ? ? _self.setData({ ? ? ? ? ?audioDuration: duration, ? ? ? ? ?alltime: `${min}:${sec}` ? ? ? }); ? ?}, 1000) })
下面就是開始播放的時候設(shè)置一個定時器,每一秒更新進(jìn)度條的百分比,顯示當(dāng)前播放的時間,停止的時候把計時器停止就可以了,這樣播放就完成了
//設(shè)置一個計步器 clearInterval(this.data.durationIntval); ? ? this.data.durationIntval = setInterval(function () { ? ? ? //當(dāng)音頻在播放時執(zhí)行 ? ? ? if (_self.data.playing) { ? ? ? ? //獲取音頻的播放時間,進(jìn)度百分比 ? ? ? ? var seek = _self.data.audioSeek; ? ? ? ? var duration = innerAudioContext.duration; ? ? ? ? //當(dāng)音頻在播放時,每隔一秒音頻播放時間+1,并計算分鐘數(shù)與秒數(shù) ? ? ? ? var min = parseInt((seek + 1) / 60); ? ? ? ? var sec = parseInt((seek + 1) % 60); ? ? ? ? if (min.toString().length == 1) { ? ? ? ? ? min = `0${min}`; ? ? ? ? } ? ? ? ? if (sec.toString().length == 1) { ? ? ? ? ? sec = `0${sec}`; ? ? ? ? } ? ? ? ? ? ? ? ? //當(dāng)進(jìn)度條完成,停止播放,并重設(shè)播放時間和進(jìn)度條 ? ? ? ? ? ? ? ? var time = _self.data.audioTime; ? ? ? ? time = parseInt(100 * seek / duration); ? ? ? ? if (time >= 100) { ? ? ? ? ? innerAudioContext.stop(); ? ? ? ? ? _self.setData({ ? ? ? ? ? ? audioSeek: 0, ? ? ? ? ? ? audioTime: 0, ? ? ? ? ? ? audioDuration: duration, ? ? ? ? ? ? playing: 0, ? ? ? ? ? ? playtime: `00:00`, ? ? ? ? ? }); ? ? ? ? ? return false; ? ? ? ? } else { ? ? ? ? ? //正常播放,更改進(jìn)度信息,更改播放時間信息 ? ? ? ? ? _self.setData({ ? ? ? ? ? ? audioSeek: seek + 1, ? ? ? ? ? ? audioTime: time, ? ? ? ? ? ? audioDuration: duration, ? ? ? ? ? ? playtime: `${min}:${sec}` ? ? ? ? ? }); ? ? ? ? } ? ? ? } ? ? ? console.log(_self.data); ? ? }, 1000);
下面就是要處理進(jìn)度條的拖動事件,這個就比較簡單了,就是獲取進(jìn)度條的百分比,轉(zhuǎn)換成相應(yīng)的播放時間,跳轉(zhuǎn)到音頻相應(yīng)的時間進(jìn)行播放就可以了
var _self = this; ? ? //獲取進(jìn)度條百分比 ? ? var value = e.detail.value; ? ? _self.setData({ ? ? ? audioTime: value ? ? }); ? ? var duration = _self.data.audioDuration; ? ? //根據(jù)進(jìn)度條百分比及歌曲總時間,計算拖動位置的時間 ? ? value = parseInt(value * duration / 100); ? ? console.log(value); ? ? //更改狀態(tài) ? ? _self.setData({ ? ? ? audioSeek: value ? ? }); ? ? var innerAudioContext = _self.data.innerAudioContext; ? ? //調(diào)用seek方法跳轉(zhuǎn)音頻時間 ? ? innerAudioContext.seek(value); ? ? //播放音頻 ? ? innerAudioContext.play();
這樣就完成收工了。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
分別用marquee和div+js實現(xiàn)首尾相連循環(huán)滾動效果,僅3行代碼
這是本人2007年進(jìn)行的一項研究,當(dāng)時網(wǎng)絡(luò)上沒有什么既精簡又實用的循環(huán)滾動代碼,所以就自己琢磨了段時間,最終找到這個辦法2011-09-09Bpmn.js activiti 流程編輯器詳細(xì)教程
流程編輯器是一種用于創(chuàng)建、編輯和管理流程圖的工具,它提供了一個可視化的界面,使用戶能夠以圖形化的方式定義和配置流程的各個步驟、條件和流程間的關(guān)系,說明關(guān)于bpmn.js的一些事件, 通過本文你可以了解到,感興趣的朋友一起看看吧2023-10-10