微信小程序使用slider實(shí)現(xiàn)音頻進(jìn)度條
眾所周知哈,微信小程序里面的音頻播放是沒(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í)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JS判斷文本框內(nèi)容改變事件的簡(jiǎn)單實(shí)例
本篇文章主要是對(duì)JS判斷文本框內(nèi)容改變事件的簡(jiǎn)單實(shí)例進(jìn)行了詳細(xì)的介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-03-03JavaScript 實(shí)現(xiàn)下雪特效的示例代碼
這篇文章主要介紹了JavaScript 實(shí)現(xiàn)下雪特效的示例代碼,幫助大家利用JavaScript制作特效,感興趣的朋友可以了解下2020-09-09fabric.js實(shí)現(xiàn)diy明信片功能
這篇文章主要為大家詳細(xì)介紹了fabric.js實(shí)現(xiàn)diy明信片功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-03-03分別用marquee和div+js實(shí)現(xiàn)首尾相連循環(huán)滾動(dòng)效果,僅3行代碼
這是本人2007年進(jìn)行的一項(xiàng)研究,當(dāng)時(shí)網(wǎng)絡(luò)上沒(méi)有什么既精簡(jiǎn)又實(shí)用的循環(huán)滾動(dòng)代碼,所以就自己琢磨了段時(shí)間,最終找到這個(gè)辦法2011-09-09uniapp小視頻項(xiàng)目開(kāi)發(fā)之滑動(dòng)播放視頻
最近在工作中遇到了一個(gè)視頻播放的需求,所以下面這篇文章主要給大家介紹了關(guān)于uniapp小視頻項(xiàng)目開(kāi)發(fā)之滑動(dòng)播放視頻的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04JS自動(dòng)適應(yīng)的圖片彈窗實(shí)例
這篇文章介紹了JS自動(dòng)適應(yīng)的圖片彈窗實(shí)例代碼,有需要的朋友可以參考一下2013-06-06javascript特殊文本輸入框網(wǎng)頁(yè)特效
這篇文章主要為大家詳細(xì)介紹了javascript特殊文本輸入框網(wǎng)頁(yè)特效,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-09-09Bpmn.js activiti 流程編輯器詳細(xì)教程
流程編輯器是一種用于創(chuàng)建、編輯和管理流程圖的工具,它提供了一個(gè)可視化的界面,使用戶能夠以圖形化的方式定義和配置流程的各個(gè)步驟、條件和流程間的關(guān)系,說(shuō)明關(guān)于bpmn.js的一些事件, 通過(guò)本文你可以了解到,感興趣的朋友一起看看吧2023-10-10