微信小程序实现播放音频

本文实例为大家分享了微信小程序实现播放音频的具体代码,供大家参考,具体内容如下

wxml:

<!-- 语音 --> <view wx:if="{{content.mp3.length > 0 }}">   <view class='audio' bindtap='musicStart'>     <view class='audio_btn'>       <image src='/img/btn_play3.webp' class='image-full' wx:if="{{playStatus}}"></image>       <!-- 未播放-->       <image src='/img/btn_stop@2x.webp' class='image-full' wx:else catchtap='canel_handover'></image>       <!-- 播放中-->     </view>     <view class='audio_pro'>       <slider class="drag" step="10" value="{{curTimeVal}}" max="{{duration}}" backgroundColor="#efefef" activeColor="#90BED5" />     </view>     <text class='audio_text'>{{formatedPlayTime}}</text>   </view> </view>

wxss:

/* 传语音 */ .audio{   display:flex;   position:relative;   height:140rpx;   line-height:140rpx;   background:#f7f7f7;   width:690rpx;   margin:0 auto; } .audio_img{   position: absolute;   top:-15rpx;   right:-15rpx;   width:30rpx;   height:30rpx; } .audio_btn{   width:88rpx;   height:88rpx;   margin-top:28rpx;    margin-left:42rpx } .audio_pro{   margin-top:36rpx;   margin-left:20rpx;   width:410rpx; } .audio_text{   font-weight: bold;   margin-left:36rpx;   color:#90BED5;   font-size: 10pt }

js:

const app = getApp(); let innerAudioContext = wx.createInnerAudioContext(); //创建音频实例 Page({   data: {     content : {},     formatedPlayTime: '00:00',     playStatus : true, //未播放的图片     curTimeVal: 0,   },   // 音频播放   musicStart: function (e) {     let that = this     that.setData({ playStatus : false})      var musicUrl = that.data.content.mp3[0] //音频url     console.log('musicUrl', musicUrl)     innerAudioContext.src = musicUrl;      innerAudioContext.autoplay = true      innerAudioContext.play();      innerAudioContext.onTimeUpdate((res) => {       console.log('onTimeUpdate', res)       console.log("duratio的值:", innerAudioContext.duration)       that.setData({         duration: innerAudioContext.duration.toFixed(2) * 100,          curTimeVal: innerAudioContext.currentTime.toFixed(2) * 100,           formatedPlayTime: this.formatTime(innerAudioContext.currentTime)         })       if (innerAudioContext.duration.toFixed(2) - innerAudioContext.currentTime.toFixed(2) <= 0) {         that.setStopState(that)       }       innerAudioContext.onEnded(() => {         that.setStopState(that)       })     })   },   updateTime: function () {     let that = this;     innerAudioContext.onTimeUpdate((res) => {       console.log(res)       console.log("duratio的值:", innerAudioContext.duration)       that.setData({         duration: innerAudioContext.duration.toFixed(2) * 100,         curTimeVal: innerAudioContext.currentTime.toFixed(2) * 100,         formatedPlayTime: this.formatTime(innerAudioContext.currentTime)       })     })     if (innerAudioContext.duration.toFixed(2) - innerAudioContext.currentTime.toFixed(2) <= 0) {       that.setStopState(that)     }     innerAudioContext.onEnded(() => {       that.setStopState(that)     })   },   canel_handover() {     // innerAudioContext.offPause(); //取消录音暂停     innerAudioContext.pause(); //语音暂停     this.setData({       playStatus: true     })   },   setStopState: function (that) {     that.setData({       curTimeVal: 0,       formatedPlayTime: 0,       playStatus: true, //图片展示为未播放       })     innerAudioContext.stop(); //   },   formatTime: (time) => {     time = Math.floor(time);     var m = Math.floor(time / 60).toString();     m = m.length < 2 ? '0' + m : m;     var s = (time - parseInt(m) * 60).toString();     s = s.length < 2 ? '0' + s : s;     return m + ':' + s;   },   onLoad: function (options) {     console.log('options', options)     var that = this      var id = options.jsonStr     app.agriknow.LoveHouseOthers(id).then(res => {       var result = res.data.Data[0]       that.setData({ content: result })     }).catch(err => {       console.log(err)     })   },   remove(){     var that = this     wx.showModal({       title: '提示',       content: '确认删除',       success(res) {         if (res.confirm) {           console.log('用户点击确定')           that.removeLove();              } else if (res.cancel) {           console.log('用户点击取消')         }       }     })   },   onShow: function (){     var that = this     setTimeout(function () {       that.setData({ loading: false })     }, 1000)   },   removeLove(){     var id = this.data.content.id     if (this.data.content.status == 1 || this.data.content.status == '1'){       app.agriknow.removeLove(id).then(res => {         if (res.data.Code == 200) {           app.way.toast('删除成功')           setTimeout(function () {             app.way.nav('/pages/mine/passLove/passLove')           }, 1000)         } else {           app.way.alert('删除失败')         }       }).catch(err => {         console.log(err)       })     }else{       app.way.modal('已审核 不能删除')     }   }, //图片点击 放大 识别   previewImage(e) {     let url = e.currentTarget.dataset.item     wx.previewImage({       current: "scene_img",       urls: url.split(',')     })   } })

推荐阅读