微信小程序音频播放

实现小程序音频播放只需要调用wx.createInnerAudioContext()，然后设置音频路径即可播放
为了用户体验更加良好，我使用一个进度条让用户能控制小程序的播放，下面是效果图

这是这两张图

wxml

<view class="music">
  <!-- 播放按钮 -->
  <image src="/image/play.png" wx:if="{{!isPlay}}" bindtap="audioPlay"></image>
  <!-- 停止按钮 -->
  <image src="/image/pause.png" wx:else bindtap="audioPause"></image>

  <slider step="1" value="{{currentTime}}" bindchanging="bindchanging" bindchange="bindchange" max="{{duration}}" backgroundColor="#efefef" activeColor="#90BED5" />
  <view class="time">{{time}}</view>
</view>

wxss

.music {
  background-color: #f7f7f7;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 40rpx 20rpx;
}
.music image {
  width: 100rpx;
  height: 100rpx;
}
.music slider {
  width: 450rpx;
}
.music .time {
  width: 50rpx;
  font-size: small;
  color: #93c4db;
}

js

初始化音频,

// 使用 wx.createInnerAudioContext 获取 audio 上下文 context
      that.audioCtx = wx.createInnerAudioContext();
      //设置src
      that.audioCtx.src="http://m10.music.126.net/20210811112352/5f088c17f13451706cda1256c75d5f75/ymusic/0799/f368/4d01/df9cb41f2ce16c6806e23b6b858948cd.mp3";//这是音频的地址，一般是从后台获取的。
      that.audioCtx.onTimeUpdate(that.timeChange);//更新时间事件

监听事件

//播放
  audioPlay () {
    this.audioCtx.play();    
    this.setData({
      isPlay:true
    })
  },
  // 停止播放
  audioPause () {
    this.audioCtx.pause()
    this.setData({
      isPlay:false
    })
  },
  //时间修改
  timeChange(){
    var that = this;
    that.setData({
      currentTime:Math.round(that.audioCtx.currentTime), //小数转整数
      duration:Math.ceil(that.audioCtx.duration), //小数转整数
      time:util.secondToTime(Math.ceil(that.audioCtx.currentTime))//秒数转分钟与秒
    })
  },
  //拖动滑块
  bindchanging(e){
    var that = this;
    console.log(e)
    //停止播放
    this.audioCtx.pause();
    //设置播放时间
    that.audioCtx.seek(e.detail.value);
    that.setData({
      time:util.secondToTime(that.audioCtx.currentTime)//秒数转分钟与秒
    })
  },
  //拖动滑块结束
  bindchange(){
    this.audioCtx.play();
  },
  //页面关闭时，停止播放
  onHide(){
    this.audioCtx.pause()
  },
  onUnload(){
    this.audioCtx.pause()
  }