微信小程序 条形加载读取进度 切换音频进度。简单实现（自定义音频界面实现）
生活随笔
收集整理的這篇文章主要介紹了
微信小程序 条形加载读取进度 切换音频进度。简单实现（自定义音频界面实现）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一開始用的官方組件發現是固定的。太丑了（代碼如下）
https://blog.csdn.net/qq_35349982/article/details/102740252
于是自己又搞了一個，踩了踩坑，做個總結
先上效果圖
記錄一下
項目中的 代碼：
wxml中
<view class="viewaudioguide"><view class="viewguide_one"><view style="position:relative;"><image wx:if="{{audioE.audio_img}}" src="{{urlBase}}{{audioE.audio_img}}" mode="" class="" id="" style="width:150rpx;height:150rpx;border:1rpx solid black;"></image><view style="position:absolute;top:20%;left:45%;"><image src="../images/3849d7a0b0dcc78a7e5707a3544ee41.png" wx:if="{{isplay==false}}" bindtap='play' mode="" class="" id="" style="width:80rpx;height:80rpx;" bindtap='play'></image><image src="../images/f3870195763a7c504ce5ec1224f76e6.png" wx:if="{{isplay==true}}" bindtap='stop' mode="" class="" id="" style="width:80rpx;height:80rpx;" bindtap='stop'></image></view></view><view><view class="viewmjytj">{{audioE.audio_name}}</view><view class="viewkgb">{{audioE.audio_subhead}}</view></view><view><view><slider bindchange="timeSliderChanged" bindchanging="slider_changed" value="{{sliderV}}" min="0" max="{{sliderMax}}" left-icon="cancel" right-icon="success_no_circle" /><view class=""><view class="viewtimeleft">{{currentTime}}</view><view class="viewtimerigh">{{audioE.audio_timelength}}</view></view></view></view></view><view class="viewnews"><view class="viewimg"><image src="../images/yinpin@2x.png" mode="" class="" id="" style="width:50rpx;height:50rpx;"></image><label>{{audioE.viewspot_name}}</label><image src="../images/yinpin@2x.png" mode="" class="" id="" style="width:50rpx;height:50rpx;float:right;margin-right:20rpx;"></image></view></view> </view>js中的代碼（ wx.createInnerAudioContext的聲明我寫在了頁面的onload中）
// pages/audiomap/audiomap.js var app = getApp(); const url = require('../../utils/url.js') const pageParams = require('../../libs/pageParams.js');//全局頁面傳參 import { requestSimple, requestSimple1, formatMinute_audio,requestBase, requestBind } from '../../utils/request' const util = require('../../utils/util.js')Page({/*** 頁面的初始數據*/data: {audioE: [],//音頻audioUrl:null,//音頻的mp3地址isplay: false,//音頻是否播放isAudioTrue: true,//音頻是否正常播放urlBase: url.urlBase,//圖片的地址currentTime:"0.00",//當前的播放位置sliderV: 0,//進度條的初始值。快進值sliderMax:0,//進度條的最終值},onLoad: function (options) {//聲明音頻上下文this.myaudio = wx.createInnerAudioContext();let that = this//音頻連接let urlA;requestSimple1(url.url.getAudioInterface,{"audio_id": options.audio_id,"tourist_id": app.globalData.touristId,},function (res) {//將音頻秒數賦值給滑動框let timelength = res.data.audio_timelength;// 將秒轉化為 分:秒res.data.audio_timelength = util.formatMinute1(res.data.audio_timelength);urlA = that.data.urlBase + "" + res.data.audio_url// 添加音頻播放的urlthat.myaudio.src = urlAthat.setData({audioLat: res.lat, //經緯度audioLon: res.lon, //經緯度audioE: res.data, //音頻集合audioUrl: urlA, //音頻的url sliderMax: timelength //音頻的時長})});//進度條變化 監聽事件this.myaudio.onTimeUpdate((res) => {//當前播放的秒數let audio_currentTime = this.myaudio.currentTime// 將秒轉化為 分:秒that.setData({currentTime: util.formatMinute_audio(audio_currentTime),})//如果當前用戶購買15秒后結束+彈窗if (that.data.audioIsBuy == false && audio_currentTime >= 15) {this.stop();//彈窗wx.showToast({title: '15秒試聽結束',//icon: 'success',duration: 2000})} else {//是否正常播放if (that.data.isAudioTrue) {that.setData({sliderV: audio_currentTime})}}})},//播放/恢復音頻play: function () {this.myaudio.play();this.setData({ isplay: true });},// 停止stop: function () {this.myaudio.pause();this.setData({ isplay: false });},//拖動滑塊的時候slider_changed: function (e) {//暫停音頻this.stop()this.setData({isAudioTrue: false});},//進度條跳轉執行的函數timeSliderChanged: function (e) {let that= this//暫停音頻that.stop()//跳轉到滑塊拖動位置that.myaudio.seek(e.detail.value)that.setData({isAudioTrue: true});//恢復音頻setTimeout(function () {that.play()}, 500)},/*** 生命周期函數--監聽頁面卸載*/onUnload: function () {//音頻關閉this.myaudio.destroy();}, })util 工具類
const formatTime = date => {const year = date.getFullYear()const month = date.getMonth() + 1const day = date.getDate()const hour = date.getHours()const minute = date.getMinutes()const second = date.getSeconds()return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':') }const formatNumber = n => {n = n.toString()return n[1] ? n : '0' + n }/*** 將秒轉換為 分:秒* s int 秒數 */ function formatMinute(s) {//計算分鐘//算法：將秒數除以60，然后下舍入，既得到分鐘數var h;h = Math.floor(s / 60);//計算秒//算法：取得秒%60的余數，既得到秒數s = s % 60;//將變量轉換為字符串h += '';s += '';//如果只有一位數，前面增加一個0h = (h.length == 1) ? '0' + h : h;s = (s.length == 1) ? '0' + s : s;return h + '分' + s+'秒'; }/*** 將秒轉換為 分:秒* s int 秒數 */ function formatMinute1(s) {//計算分鐘//算法：將秒數除以60，然后下舍入，既得到分鐘數var h;h = Math.floor(s / 60);//計算秒//算法：取得秒%60的余數，既得到秒數s = s % 60;//將變量轉換為字符串h += '';s += '';//如果只有一位數，前面增加一個0h = (h.length == 1) ? '0' + h : h;s = (s.length == 1) ? '0' + s : s;return h + ':' + s ; }/*** 將秒轉換為 分:秒 音頻專用* s int 秒數 */ function formatMinute_audio(s) {//計算分鐘//算法：將秒數除以60，然后下舍入，既得到分鐘數var h;//去除小數點s = parseInt(s) h = Math.floor(s / 60);//計算秒//算法：取得秒%60的余數，既得到秒數s = s % 60;//將變量轉換為字符串h += '';s += '';//如果只有一位數，前面增加一個0if (h == '0'){h = (h.length == 1) ? h : h;}else{h = (h.length == 1) ? '0' + h : h;}s = (s.length == 1) ? '0' + s : s;return h + ':' + s; }//將2018年5月5日轉化為2018-5-5 拼接 2019-10-17 00:00 const formatDataTime = (data1, data2) => {let value = "";data1 = data1.replace(/年/, '-');data1 = data1.replace(/月/, '-');data1 = data1.replace(/日/, ''); value = data1 + " " + data2return value }module.exports = {formatMinute: formatMinute,formatMinute1: formatMinute1,formatTime: formatTime,formatMinute_audio: formatMinute_audio,formatDataTime: formatDataTime }采坑記錄帖子：
https://blog.csdn.net/qq_35349982/article/details/102778442
總結
以上是生活随笔為你收集整理的微信小程序 条形加载读取进度 切换音频进度。简单实现（自定义音频界面实现）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 微信小程序 条形加载读取进度 切换音频进
- 下一篇： wx.createInnerAudioC