一开始用的官方组件发现是固定的。太丑了（代码如下）
https://blog.csdn.net/qq_35349982/article/details/102740252
于是自己又搞了一个，踩了踩坑，做个总结
先上效果图

记录一下

使用的是createInnerAudioContext（官方文档如下） https://developers.weixin.qq.com/miniprogram/dev/api/media/audio/InnerAudioContext.html
wx.createInnerAudioContext的声明我写在了页面的onload中。也有很多写法，比较乱
音频分为音频跟背景音频。这里使用的是音频Api 也就是 createInnerAudioContext
createInnerAudioContextAPI 认真看一遍 里面的onTimeUpdate很重要还有就是 slider的使用（链接如下） https://developers.weixin.qq.com/miniprogram/dev/component/slider.html，主要用bindchange，bindchangeing，里面的属性也很重要，要实现上面的图的功能的话

项目中的代码：

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

微信小程序条形加载读取进度切换音频进度。简单实现（自定义音频界面实现）相关推荐

微信小程序条形加载读取进度切换音频进度。简单实现（官方文档）
自定义实现音频播放,连接如下 https://blog.csdn.net/qq_35349982/article/details/102778340 这个是官方的音频 wxml文件 .主要是 slid ...
微信小程序上传视频到服务器太慢,微信小程序视频播放加载很慢
- 当前 Bug 的表现(可附上截图) - 预期表现 - 复现路径 - 提供一个最简复现 Demo 微信小程序视频播放加载很慢,一直转圈,3分钟后才能播放,而且播放很卡,加了带宽和cdn也没有效果,官 ...
微信小程序分页加载列表
微信小程序分页加载列表: 项目开发时很多页面都需要用到分页加载列表,为了方便,自己封装了分页加载列表组件,下拉刷新列表,滑动至底部,加载更多组件界面: 可以扫码查看是否符合自己的需求 wxml: & ...
微信小程序分包加载，分包加载的优势
微信小程序分包加载: 有时候我们的小程序太大,首次打开小程序的时候会比较慢,可以进行分包处理,按照功能的划分,拆分成几个分包,让用户在操作小程序的时候按需下载资源(用户在进入某些页面的时候才去下载相应 ...
微信小程序，Eror代码包大小为12497kb,上限为 2048 kb,请删除文件后重试？微信小程序分包加载
微信小程序如何解决预览超过2M的问题?微信小程序分包加载在微信小程序开发过程中有个问题让人很头疼,就是预览的项目不能超过2M,我们的项目通常都会超过这个大小限制.那到底怎么解决呢?其实官方给出了解决 ...
微信小程序列表加载动画示例
微信小程序列表加载动画微信小程序列表加载动画示例实现思路什么是动画? 导航栏设置列表动画加载完整代码demo 微信小程序列表加载动画示例初学微信小程序开发,记录一下.网上找了很久这种效果, ...
微信小程序踩坑日记-微信小程序首次加载样式错乱问题
微信小程序踩坑日记-微信小程序首次加载样式错乱问题在实际开发项目中,遇到了个棘手的问题,就是在某些因素下,进入小程序发现有些样式发生偏移.错乱等问题问题原因:-未知(估计是组件的问题) ↓ 解决办 ...
微信小程序web-view加载网页字体非常小的问题
一.问题如下图所示,微信小程序web-view加载网页的字体非常小: 二.问题解决,在网页中加上 <meta name=viewport content="width=device-w ...
微信小程序怎么取mysql_微信小程序如何加载数据库真实数据？
微信小程序要加载网站数据库里面的真实数据,有一个硬性的要求,就是你的网站域名必须是https协议才行,要不然你第一步服务器域名配置你都通过不了,小编我也是前不久申请的https://www.100tx ...

微信小程序条形加载读取进度切换音频进度。简单实现（自定义音频界面实现）

记录一下

项目中的代码：

wxml中

js中的代码（ wx.createInnerAudioContext的声明我写在了页面的onload中）

util 工具类

微信小程序条形加载读取进度切换音频进度。简单实现（自定义音频界面实现）相关推荐

最新文章

热门文章

微信小程序 条形加载读取进度 切换音频进度。简单实现（自定义音频界面实现）

记录一下

项目中的 代码：

wxml中

js中的代码（ wx.createInnerAudioContext的声明我写在了页面的onload中）

util 工具类

微信小程序 条形加载读取进度 切换音频进度。简单实现（自定义音频界面实现）相关推荐

最新文章

热门文章

微信小程序条形加载读取进度切换音频进度。简单实现（自定义音频界面实现）

项目中的代码：

微信小程序条形加载读取进度切换音频进度。简单实现（自定义音频界面实现）相关推荐