欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2022年06月30日 17:07:19   作者:北城碼農(nóng)  
這篇文章主要為大家詳細(xì)介紹了微信小程序使用slider實現(xiàn)音頻進(jìn)度條,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下

眾所周知哈,微信小程序里面的音頻播放是沒有進(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)文章

  • JS判斷文本框內(nèi)容改變事件的簡單實例

    JS判斷文本框內(nèi)容改變事件的簡單實例

    本篇文章主要是對JS判斷文本框內(nèi)容改變事件的簡單實例進(jìn)行了詳細(xì)的介紹,需要的朋友可以過來參考下,希望對大家有所幫助
    2014-03-03
  • JavaScript 實現(xiàn)下雪特效的示例代碼

    JavaScript 實現(xiàn)下雪特效的示例代碼

    這篇文章主要介紹了JavaScript 實現(xiàn)下雪特效的示例代碼,幫助大家利用JavaScript制作特效,感興趣的朋友可以了解下
    2020-09-09
  • fabric.js實現(xiàn)diy明信片功能

    fabric.js實現(xiàn)diy明信片功能

    這篇文章主要為大家詳細(xì)介紹了fabric.js實現(xiàn)diy明信片功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-03-03
  • 分別用marquee和div+js實現(xiàn)首尾相連循環(huán)滾動效果,僅3行代碼

    分別用marquee和div+js實現(xiàn)首尾相連循環(huán)滾動效果,僅3行代碼

    這是本人2007年進(jìn)行的一項研究,當(dāng)時網(wǎng)絡(luò)上沒有什么既精簡又實用的循環(huán)滾動代碼,所以就自己琢磨了段時間,最終找到這個辦法
    2011-09-09
  • uniapp小視頻項目開發(fā)之滑動播放視頻

    uniapp小視頻項目開發(fā)之滑動播放視頻

    最近在工作中遇到了一個視頻播放的需求,所以下面這篇文章主要給大家介紹了關(guān)于uniapp小視頻項目開發(fā)之滑動播放視頻的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-04-04
  • 詳解如何利用JavaScript繪制堆疊柱狀圖

    詳解如何利用JavaScript繪制堆疊柱狀圖

    堆疊柱狀圖將每個柱子進(jìn)行分割以顯示相同類型下各個數(shù)據(jù)的大小情況??梢孕蜗蟮谜故疽粋€大分類包含的每個小分類的數(shù)據(jù),以及各個小分類的占比,顯示的是單個項目與整體之間的關(guān)系。本文將利用JavaScript實現(xiàn)堆疊柱狀圖的繪制,需要的可以參考一下
    2022-03-03
  • Bootstrap中的Panel和Table全面解析

    Bootstrap中的Panel和Table全面解析

    這篇文章主要介紹了Bootstrap中的Panel和Table全面解析的相關(guān)資料,非常不錯具有參考借鑒價值,需要的朋友可以參考下
    2016-06-06
  • JS自動適應(yīng)的圖片彈窗實例

    JS自動適應(yīng)的圖片彈窗實例

    這篇文章介紹了JS自動適應(yīng)的圖片彈窗實例代碼,有需要的朋友可以參考一下
    2013-06-06
  • javascript特殊文本輸入框網(wǎng)頁特效

    javascript特殊文本輸入框網(wǎng)頁特效

    這篇文章主要為大家詳細(xì)介紹了javascript特殊文本輸入框網(wǎng)頁特效,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-09-09
  • Bpmn.js activiti 流程編輯器詳細(xì)教程

    Bpmn.js activiti 流程編輯器詳細(xì)教程

    流程編輯器是一種用于創(chuàng)建、編輯和管理流程圖的工具,它提供了一個可視化的界面,使用戶能夠以圖形化的方式定義和配置流程的各個步驟、條件和流程間的關(guān)系,說明關(guān)于bpmn.js的一些事件, 通過本文你可以了解到,感興趣的朋友一起看看吧
    2023-10-10

最新評論