微信小程序 音频播放功能createInnerAudioContext
效果：
前端界面代码：
<view class="cu-modal {{ModalName=='DialogModal'?'show':''}}"><view class="cu-dialog"><view class="cu-bar bg-white justify-end"><view class="content">播放器</view><view class="action" bindtap="hideModal" data-value='cancel'><text class="cuIcon-close text-red"></text></view></view><view class='progress'><text class="cuIcon-{{buttonPlay}} lg text-black" bindtap="PlayVideo"></text><text >{{PlayStartTime}}/{{PlayEndTime}}</text><slider class='bar' bindchange="sliderChange" bindchanging="sliderChanging" value="{{ProValue}}" step="1" min='{{ProMin}}' max='{{ProMax}}' activeColor="grey" block-size="10" block-color="grey" /></view></view>
后端js代码：
const innerAudioContext = wx.createInnerAudioContext(); Page({/** * 页面的初始数据 */ data: {audioArr: [],//音频列表 ModalName:null,//弹出选择层 buttonPlay:"playfill",//播放按钮 PlayAudioUrl:"",//播放地址 PlayStartTime:"00:00",//播放开始时间 PlayEndTime:"00:00",//播放结束时间 ProMin:0,//进度条开始 ProMax:10,//进度条结束 ProValue:0,//进度条值 }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) {}, //点击查看图片 clickImg:function(e){var imgUrl = e.currentTarget.dataset.imgurl; wx.previewImage({urls: [imgUrl], //需要预览的图片http链接列表，注意是数组 current: '', // 当前显示图片的http链接，默认是第一个 success: function (res) {}, fail: function (res) {}, complete: function (res) {}, })}, //弹出播放音频框 audioPlay:function(e){var index=e.currentTarget.dataset.key; var audio=e.currentTarget.dataset.audioarr[index]; console.log(audio); this.setData({ModalName: e.currentTarget.dataset.target })console.log(this.data.ModalName); innerAudioContext.autoplay = false innerAudioContext.src = audio; let that =this; innerAudioContext.onPlay(() => {console.log('开始播放')}); innerAudioContext.onCanplay(()=> {innerAudioContext.duration; setTimeout(() => {that.setData({PlayEndTime: that.formatTime(Math.ceil(innerAudioContext.duration))}); console.log(innerAudioContext.duration); }, 200)}) innerAudioContext.onTimeUpdate(()=>{console.log('更新播放')that.setData({PlayStartTime: that.formatTime(Math.ceil(innerAudioContext.currentTime)), ProMax:innerAudioContext.duration.toFixed(0), ProMin:0, ProValue:innerAudioContext.currentTime.toFixed(0), }); }); innerAudioContext.onEnded(()=>{console.log('播放结束')that.setData({buttonPlay: "playfill" }); }); innerAudioContext.onError((res) => {that.setData({buttonPlay: "playfill" }); console.log(res.errMsg)console.log(res.errCode)}); }, //拖动进度条中 sliderChanging:function(){innerAudioContext.pause(); this.setData({buttonPlay: "playfill" }); }, //拖动进度条 sliderChange:function(e){console.log(e.detail.value); innerAudioContext.seek(e.detail.value); innerAudioContext.play(); this.setData({buttonPlay: "stop" }); }, //分配hideModal(e) {var value=e.currentTarget.dataset.value; console.log(value); this.StopVideo(); },//停止播放，退回开始状态 StopVideo:function(){this.setData({ModalName: null, buttonPlay: "playfill", PlayStartTime:"00:00", ProMin:0, ProValue:0 }); innerAudioContext.stop(); }, //开始播放/停止 PlayVideo:function(){if(this.data.buttonPlay=="playfill"){innerAudioContext.play(); this.setData({buttonPlay: "stop" }); }else{innerAudioContext.pause(); this.setData({buttonPlay: "playfill" }); } }, //格式化时长 formatTime: function(s) {let t = ''; s = Math.floor(s); if (s > -1) {let min = Math.floor(s / 60) % 60; let sec = s % 60; if (min < 10) {t += "0"; } t += min + ":"; if (sec < 10) {t += "0"; } t += sec; } return t; }, })
如果觉得《微信小程序 音频播放功能createInnerAudioContext》对你有帮助，请点赞、收藏，并留下你的观点哦！
