微信小程序音频播放

Posted 2020-12-11 小熊叶叶

    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">
			<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;
}
.all-time-line{
  width: 100%;
  height: 4rpx;
  background-color: #C9C9C9;
}
.play-time{
  width: 60%;
  position: absolute;
  left: 0;
  top: 0;
  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);
},
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)
  })
},