怎么使用微信小程序實現播放音頻

這篇“怎么使用微信小程序實現播放音頻”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“怎么使用微信小程序實現播放音頻”文章吧。

wxml：

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

以上就是關于“怎么使用微信小程序實現播放音頻”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。