怎么使用微信小程序实现播放音频

这篇“怎么使用微信小程序实现播放音频”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“怎么使用微信小程序实现播放音频”文章吧。

wxml：

<!-- 语音 --><view wx:if="{{content.mp3.length > 0 }}">  <view class='audio' bindtap='musicStart'>    <view class='audio_btn'>      <image class="lazy" data-src='/img/btn_play3.png' class='image-full' wx:if="{{playStatus}}"></image>      <!-- 未播放-->      <image class="lazy" data-src='/img/btn_stop@2x.png' 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.class="lazy" data-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(',')    })  }})

以上就是关于“怎么使用微信小程序实现播放音频”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网行业资讯频道。