播放器进度条组件

播放器进度条

播放器进度条由如下部分组成：

1.左边的时间：已经播放的时间长度

2.右边的时间：歌曲总长度

3.中间的进度条

中间的进度条由如下部分组成：

1.表示总长度的黑色进度条。

     （静态的，只需要用css就能实现；可以点击进度条，歌曲跳到点击处播放）

2.黄色的进度条。

     （表示已经播放的歌曲长度，需要js动态设置其width）

3.进度条按钮。

      （按钮所在的位置表示歌曲已播放的长度，使用transform的translate3d可以动态调   整按钮的位置；按钮可以拖拽，改变歌曲的进度；）

根据以上的分析，首先我们需要知道歌曲播放的时长，以此来改变黄色进度条和进度条按钮的位置。

1.计算已播放时长占总时长的百分比

歌曲播放使用的是audio控件，可以通过控件的timeupdate事件得到(或者设置)歌曲已播放的时长this.currentTime = e.target.currentTime

将百分比设置为计算属性，得到百分比： percent  = this.currentTime / this.currentSong.duration

在父组件（player.vue）上传入percent属性，子组件(progress-bar.vue)中使用props接收参数，由此得到百分比

2.通过百分比设置进度条和按钮的位置

进度条总长度：barWidth = 黑色进度条长度 - 按钮宽度

黄色进度条长度和按钮位置的偏移量相同，使用offset变量表示：offset = percent * barWidth

设置黄色进度条宽度：

this.$refs.progress.style.width = `${offset}px`

设置按钮偏移量

this.$refs.progressBtn.style[transform] = `translate3d(${offset}px, 0, 0)`

由于有多处地方可能使用到改变进度条长度和按钮偏移量，因此使用一个函数对其进行包装：

_offset(offset) {

            this.$refs.progress.style.width = `${offset}px`

            this.$refs.progressBtn.style[transform] = `translate3d(${offset}px, 0, 0)`

}

3.按钮的拖拽事件

在按钮所在div上监听如下事件：

@touchstart.prevent = "progressTouchStart"

@touchmove.prevent = "progressTouchMove"

@touchend = "progressTouchEnd"

其中，progressTouchStart事件中，需要记录开始的位置，设置一个标识变量表示已经开始拖拽事件，记录当前黄色进度条的宽度，由于记录的这些值可能会在move或者end函数中使用到，因此组件应该维护一个变量对象来记录这些值，这里使用 this.touch = {}

this.touch.initialed = true  //标识变量，标识已经开始拖拽事件

this.touch.startX = e.touches[0].pageX  //开始位置

this.touch.left = this.$refs.progress.clientWidth  //黄色进度条宽度

progressTouchMove事件中，应该根据拖拽的位置重新计算偏移量offset 

progressTouchMove(e) {

     if (!this.touch.initiated) {

           return

      }

     const deltaX = e.touches[0].pageX - this.touch.startX

     const offsetWidth = Math.min(this.$refs.progressBar.clientWidth - progressBtnWidth,           Math.max(0, this.touch.left + deltaX))

      this._offset(offsetWidth)

}

在progressEnd事件中，应该将标识标量设置为false，并且通过拖拽结果重新计算歌曲已播放百分比

progressTouchEnd() {

       this.touch.initiated = false

      this._triggerPercent()    // 触发重新计算百分比事件

}

其中_triggerPercent所做工作如下：

_triggerPercent() {

    const barWidth = this.$refs.progressBar.clientWidth - progressBtnWidth

    const percent = this.$refs.progress.clientWidth / barWidth

     this.$emit('percentChange', percent)

}

由此，父组件（player.vue）中可以监听percentChange事件，并且根据参数percent计算已播放事件，并且设置audio控件的currentTime

onProgressBarChange(percent) {

     const currentTime = this.currentSong.duration * percent

      this.$refs.audio.currentTime = currentTime

     // 这个if是为了解决：在暂停状态拖动进度条，拖动之后还是暂时的问题（正常情况下 应该是在拖动结束处继续播放）

     if (!this.playing) {

          this.togglePlaying()

     }

}