快捷導(dǎo)航

微信小程序使用slider實(shí)現(xiàn)音頻進(jìn)度條

更新時(shí)間：2022年06月30日 17:07:19 作者：北城碼農(nóng)

這篇文章主要為大家詳細(xì)介紹了微信小程序使用slider實(shí)現(xiàn)音頻進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

眾所周知哈，微信小程序里面的音頻播放是沒(méi)有進(jìn)度條的，但最近有個(gè)項(xiàng)目呢，客戶要求音頻要有進(jìn)度條控制，所以就想到了用slider來(lái)實(shí)現(xiàn)音頻的進(jìn)度條顯示及控制

微信小程序的slider組件，效果如圖：

長(zhǎng)的跟進(jìn)度條還是蠻相似的。

下面上代碼

slider是進(jìn)度條，bindchange是slider的拖動(dòng)事件，playtime 已播放時(shí)間，alltime 總時(shí)間

<view class='slider'>
? ? <slider bindchange='sliderChange' activeColor='red' block-size="12" value='{{audioTime}}' />
</view>
<view class='time'>
? ? {{playtime}} / {{alltime}}
</view>

首先要初始化一個(gè)音頻播放器，然后要獲取音頻的總時(shí)長(zhǎng)duration，然后需要把這個(gè)時(shí)長(zhǎng)轉(zhuǎn)換成00:00這樣的格式顯示

var _self = this;
var innerAudioContext = this.data.innerAudioContext;
innerAudioContext.onCanplay(() => {
? ?//初始化duration
? innerAudioContext.duration
? setTimeout(function () {
? ? ? //延時(shí)獲取音頻真正的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)
})

下面就是開(kāi)始播放的時(shí)候設(shè)置一個(gè)定時(shí)器，每一秒更新進(jìn)度條的百分比，顯示當(dāng)前播放的時(shí)間，停止的時(shí)候把計(jì)時(shí)器停止就可以了，這樣播放就完成了

//設(shè)置一個(gè)計(jì)步器
clearInterval(this.data.durationIntval);
? ? this.data.durationIntval = setInterval(function () {
? ? ? //當(dāng)音頻在播放時(shí)執(zhí)行
? ? ? if (_self.data.playing) {
? ? ? ? //獲取音頻的播放時(shí)間，進(jìn)度百分比
? ? ? ? var seek = _self.data.audioSeek;
? ? ? ? var duration = innerAudioContext.duration;
? ? ? ? //當(dāng)音頻在播放時(shí)，每隔一秒音頻播放時(shí)間+1，并計(jì)算分鐘數(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è)播放時(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)度信息，更改播放時(shí)間信息
? ? ? ? ? _self.setData({
? ? ? ? ? ? audioSeek: seek + 1,
? ? ? ? ? ? audioTime: time,
? ? ? ? ? ? audioDuration: duration,
? ? ? ? ? ? playtime: `${min}:${sec}`
? ? ? ? ? });
? ? ? ? }
? ? ? }
? ? ? console.log(_self.data);
? ? }, 1000);

下面就是要處理進(jìn)度條的拖動(dòng)事件，這個(gè)就比較簡(jiǎn)單了，就是獲取進(jìn)度條的百分比，轉(zhuǎn)換成相應(yīng)的播放時(shí)間，跳轉(zhuǎn)到音頻相應(yīng)的時(shí)間進(jìn)行播放就可以了

var _self = this;
? ? //獲取進(jìn)度條百分比
? ? var value = e.detail.value;
? ? _self.setData({
? ? ? audioTime: value
? ? });
? ? var duration = _self.data.audioDuration;
? ? //根據(jù)進(jìn)度條百分比及歌曲總時(shí)間，計(jì)算拖動(dòng)位置的時(shí)間
? ? value = parseInt(value * duration / 100);
? ? console.log(value);
? ? //更改狀態(tài)
? ? _self.setData({
? ? ? audioSeek: value
? ? });
? ? var innerAudioContext = _self.data.innerAudioContext;
? ? //調(diào)用seek方法跳轉(zhuǎn)音頻時(shí)間
? ? innerAudioContext.seek(value);
? ? //播放音頻
? ? innerAudioContext.play();

這樣就完成收工了。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: