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

微信小程序使用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í)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

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

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

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

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

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

    fabric.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行代碼

    分別用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-09
  • uniapp小視頻項(xiàng)目開(kāi)發(fā)之滑動(dòng)播放視頻

    uniapp小視頻項(xiàng)目開(kāi)發(fā)之滑動(dòng)播放視頻

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

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

    堆疊柱狀圖將每個(gè)柱子進(jìn)行分割以顯示相同類(lèi)型下各個(gè)數(shù)據(jù)的大小情況。可以形象得展示一個(gè)大分類(lèi)包含的每個(gè)小分類(lèi)的數(shù)據(jù)，以及各個(gè)小分類(lèi)的占比，顯示的是單個(gè)項(xiàng)目與整體之間的關(guān)系。本文將利用JavaScript實(shí)現(xiàn)堆疊柱狀圖的繪制，需要的可以參考一下
    2022-03-03
  • Bootstrap中的Panel和Table全面解析

    Bootstrap中的Panel和Table全面解析

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

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

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

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

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

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

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

最新評(píng)論