微信小程序怎么使用slider實現音頻進度條

蝸牛 互聯網技術資訊 2022-06-30 46 0

這篇文章主要介紹了微信小程序怎么使用slider實現音頻進度條的相關知識,內容詳細易懂,操作簡單快捷,具有一定借鑒價值,相信大家閱讀完這篇微信小程序怎么使用slider實現音頻進度條文章都會有所收獲,下面我們一起來看看吧。

微信小程序的slider組件,效果如圖:

微信小程序怎么使用slider實現音頻進度條  微信小程序 第1張

長的跟進度條還是蠻相似的。

下面上代碼?

?slider是進度條,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,然后需要把這個時長轉換成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)
})

下面就是開始播放的時候設置一個定時器,每一秒更新進度條的百分比,顯示當前播放的時間,停止的時候把計時器停止就可以了,這樣播放就完成了

//設置一個計步器
clearInterval(this.data.durationIntval);
????this.data.durationIntval?=?setInterval(function?()?{
??????//當音頻在播放時執行
??????if?(_self.data.playing)?{
????????//獲取音頻的播放時間,進度百分比
????????var?seek?=?_self.data.audioSeek;
????????var?duration?=?innerAudioContext.duration;
????????//當音頻在播放時,每隔一秒音頻播放時間+1,并計算分鐘數與秒數
????????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}`;
????????}????????
????????//當進度條完成,停止播放,并重設播放時間和進度條????????
????????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?{
??????????//正常播放,更改進度信息,更改播放時間信息
??????????_self.setData({
????????????audioSeek:?seek?+?1,
????????????audioTime:?time,
????????????audioDuration:?duration,
????????????playtime:?`${min}:${sec}`
??????????});
????????}
??????}
??????console.log(_self.data);
????},?1000);

下面就是要處理進度條的拖動事件,這個就比較簡單了,就是獲取進度條的百分比,轉換成相應的播放時間,跳轉到音頻相應的時間進行播放就可以了

var?_self?=?this;
????//獲取進度條百分比
????var?value?=?e.detail.value;
????_self.setData({
??????audioTime:?value
????});
????var?duration?=?_self.data.audioDuration;
????//根據進度條百分比及歌曲總時間,計算拖動位置的時間
????value?=?parseInt(value?*?duration?/?100);
????console.log(value);
????//更改狀態
????_self.setData({
??????audioSeek:?value
????});
????var?innerAudioContext?=?_self.data.innerAudioContext;
????//調用seek方法跳轉音頻時間
????innerAudioContext.seek(value);
????//播放音頻
????innerAudioContext.play();

關于“微信小程序怎么使用slider實現音頻進度條”這篇文章的內容就介紹到這里,感謝各位的閱讀!相信大家對“微信小程序怎么使用slider實現音頻進度條”知識都有一定的了解,大家如果還想學習更多知識,歡迎關注蝸牛博客行業資訊頻道。

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:niceseo99@gmail.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

評論

日本韩欧美一级A片在线观看