播放器进度条
播放器进度条由如下部分组成：
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()
}
}
网友评论