微信小程序音频播放

    audioWidth: 0, //播放进度的长
    isPlaying: false, //是否正在播放
    audioContent: null, //音频对象
    currentTime: 0, //播放当前时间（处理后的  1：00）
    duration: 0, //播放总时长 (处理后 4:30)
    oriCurrentTime: 0, //播放当前时间   s
    oriDuration: 100, //播放总时长   s
    startPageX: 74, //开始的pageX
    endPageX: 514, //结束的pageX
    touchStartX: 0, //触摸开始pageX

　　

 <view class="progress-bar" bindtap="clickSeek">

      <view class="all-time-line"></view>

      <view class="play-time" style="width: {{audioWidth}}">

        <view class="play-time-line"></view>

        <view class="cicle" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd"></view>

      </view>

    </view>

　　

.progress-bar{

  position: relative;

  width: 440rpx;

  margin-left: 20rpx;

  margin-right: 20rpx;

  padding: 20rpx 0;

}

.all-time-line{

  width: 100%;

  height: 4rpx;

  background-color: #C9C9C9;

}

.play-time{

  width: 60%;

  position: absolute;

  left: 0;

  top: 20rpx;

  display: flex;

  flex-direction: row;

  align-items: center;

  z-index: 2;

}

.play-time-line{

  width: 100%;

  height: 4rpx;

  background-color: #1FAB89;

  box-shadow:0 0 10rpx rgba(31,171,137,0.6);

}

.cicle{

  font-size: 0;

  position: absolute;

  top: -8rpx;

  right: -8rpx;

  width: 20rpx;

  height: 20rpx;

  border-radius: 50%;

  background-color: #1FAB89;

}

　　

/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let that = this;
    let src = '/images/index/Kalimba.mp3';
    that.initMusic(src);
  },
  initMusic: function(audioSrc) {
    // 音频
    var that = this;
    wx.getSystemInfo({
      success: function(res) {
        that.setData({
          startPageX: res.windowWidth / 750 * that.data.startPageX,
          endPageX: res.windowWidth / 750 * that.data.endPageX
        })
      },
    })
    let audioContent = wx.createInnerAudioContext();
    that.setData({
      audioContent: audioContent
    })
    audioContent = that.data.audioContent;
    audioContent.src = audioSrc;
    // 播放时间更新时
    audioContent.onTimeUpdate(function() {
      // if (that.data.oriDuration != 0) {
        let currentTime;
        let oriCurrentTime = parseInt(audioContent.currentTime);
        that.setData({
          currentTime: that.handle(oriCurrentTime),
          // oriCurrentTime: parseInt(audioContent.currentTime)
          audioWidth: oriCurrentTime / that.data.oriDuration * 100 + '%'
        })

      // }
    })
    // 播放结束时
    audioContent.onEnded(function() {
      that.setData({
        isPlaying: false,
        currentTime: 0,
        audioWidth: '0%'
      })
    })
    // 音频初始化完成设置时长
    // audioContent.onCanplay(function() {
    // audioContent.play();
    // setTimeout(() => {
    //   that.setData({
    //     duration: that.handle(parseInt(audioContent.duration)),
    //     oriDuration: parseInt(audioContent.duration)
    //   })
    //   audioContent.stop();
    // }, 1000)
    // })



  },
  // 暂停播放点击
  playMusic: function() {
    var that = this;
    // if(that.data.duration != 0){
      if (that.data.isPlaying) {
        that.setData({
          isPlaying: false
        })
        that.data.audioContent.pause();
      } else {
        that.setData({
          isPlaying: true
        })
        that.data.audioContent.play();
      }
    // }
    
  },
 // 秒变分钟
 handle: function(time) {
  return parseInt(time / 60) + ':' + ((time % 60) < 10 ? '0' + (time % 60) : (time % 60));
},
//滑动更改播放进度
touchStart: function(e) {
  // console.log("x:" + e.touches[0].pageX + "Y:" + e.touches[0].pageY);
  var that = this;
  that.toSeek(e.touches[0].pageX);
},
touchMove: function(e) {
  var that = this;
  that.toSeek(e.touches[0].pageX);
  // that.setData({
  //   touchStartX: e.touches[0].pageX
  // })
},
touchEnd: function() {
  var that = this;
  that.toSeek(that.data.touchStartX);
},

　clickSeek: function(e) {

 　  let pageX = e.detail.x;

 　  this.toSeek(pageX);

　},

toSeek: function(pageX) {
  var that = this;
  // let playPercent = pageX / that.data.endPageX;
  if (pageX > that.data.endPageX) {
    pageX = that.data.endPageX;
  }
  if (pageX < that.data.startPageX) {
    pageX = that.data.startPageX;
  }
  let playPercent = (pageX - that.data.startPageX) / (that.data.endPageX - that.data.startPageX);
  // console.log(playPercent);
  that.setData({
    touchStartX: pageX,
    audioWidth: playPercent * 100 + '%'
  })
  let oriCurrentTime = parseInt(that.data.oriDuration * playPercent);
  that.data.audioContent.seek(oriCurrentTime);
  that.setData({
    oriCurrentTime: oriCurrentTime,
    currentTime: that.handle(oriCurrentTime)
  })
},