音乐播放器

音乐播放器组件

audio.wxml

<view class="music">
  <view class="music-img" bindtap="playMusic">
    <image src="/static/blue_bck.png"></image>
    <image src="{{isPlaying?'/static/audio/play.png':'/static/audio/start.png'}}"></image>
  </view>
  <view class="time-img" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd">
    <image src="/static/audio/gray_time.png"></image>
    <view class="act-img" style="width:{{audioWidth}}"></view>
  </view>
  <view class="time-text">
    <text>{{duration}}</text>
  </view>
</view>

audio.wxss

.music{
  width: 700rpx;
  height: 126rpx;
  margin: 0 auto;
  padding-left: 16rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  border-radius: 5rpx;
  background-color: #F6F6F6;
}
.music-img{
  position: relative;
  width: 120rpx;
  height: 96rpx;
  margin-right: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.music-img > image:first-of-type{
  position: absolute;
  left: 0;
  top: 0;
  width: 120rpx;
  height: 96rpx;
}
.music-img > image:nth-of-type(2){
  position: relative;
  width: 47rpx;
  height: 47rpx;
}
.time-img{
  position: relative;
  width: 482rpx;
  height: 64rpx;
  overflow: hidden;
}
.time-img > image{
  width: 482rpx;
  height: 64rpx;
}
.act-img{
  position: absolute;
  left: 0;
  top: 0;
  width: 100rpx;
  height: 64rpx;
  background: url('https://qmjy.bingying.ren/static/wx/audio/blue_time.png') no-repeat;
  background-size: 482rpx 64rpx;
  z-index: 2;
}
.time-text{
  margin-left: auto;
  width: 57rpx;
  height: 30rpx;
  line-height: 30rpx;
  text-align: center;
  border-top-left-radius: 13rpx;
  border-bottom-left-radius: 13rpx;
  background-color: #1F1E31;
  font-size: 16rpx;
  color: #fff;
}

audio.js

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    audioSrc: String,
    startPageX: Number, //开始的pageX  172
    endPageX: Number, //结束的pageX  654
  },

  /**
   * 组件的初始数据
   */
  data: {
    audioWidth: 0, //播放进度的长
    isPlaying: false, //是否正在播放
    audioContent: null, //音频对象
    currentTime: 0, //播放当前时间（处理后的  1：00）
    duration: 0, //播放总时长 (处理后 4:30)
    oriCurrentTime: 0, //播放当前时间   s
    oriDuration: 0, //播放总时长   s
    
    touchStartX: 0, //触摸开始pageX
  },
  lifetimes: {
    
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },
  },
  pageLifetimes: {
    // show: function () {
    //   let that = this;
    //   that.initMusic();
    // },
    hide: function () {
      let that = this;
      that.data.audioContent.stop();
    },
  },
  ready: function() {
    // 在组件实例进入页面节点树时执行
    let that = this;
    that.initMusic();
  },
  /**
   * 组件的方法列表
   */
  methods: {
    initMusic: function () {
      // 音频
      var that = this;
      wx.getSystemInfo({
        success: function (res) {
          that.setData({
            startPageX: res.windowWidth / 750 * that.properties.startPageX,
            endPageX: res.windowWidth / 750 * that.properties.endPageX
          })
        },
      })
      let audioContent = wx.createInnerAudioContext();
      audioContent.src = that.properties.audioSrc;
      that.setData({
        audioContent: audioContent
      })
      // 播放时间更新时
      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.duration;
        setTimeout(() => {
          that.setData({
            duration: that.handle(parseInt(audioContent.duration)),
            oriDuration: parseInt(audioContent.duration)
          })
        }, 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.properties.endPageX) {
        pageX = that.properties.endPageX;
      }
      if (pageX < that.properties.startPageX) {
        pageX = that.properties.startPageX;
      }
      let playPercent = (pageX - that.properties.startPageX) / (that.properties.endPageX - that.properties.startPageX);
      // console.log(playPercent);
      that.setData({
        touchStartX: pageX,
        audioWidth: playPercent * 100 + '%',
        duration: that.handle(parseInt(that.data.audioContent.duration)),
        oriDuration: parseInt(that.data.audioContent.duration)
      })

      let oriCurrentTime = parseInt(that.data.oriDuration * playPercent);
      that.data.audioContent.seek(oriCurrentTime);
      that.setData({
        oriCurrentTime: oriCurrentTime,
        currentTime: that.handle(oriCurrentTime)
      })
    },
  }
})

调用

 <my-audio  id="myAudio" audioSrc="{{info.url}}" startPageX="172" endPageX="654"></my-audio>

效果