基于vue2.0實現音樂/視頻播放進度條組件的方法及代碼解釋

需求分析：

①：進度條隨著歌曲的播放延長，歌曲播放完時長度等于黑色總進度條長度；時間實時更新。

②：當滑動按鈕時，實時更新播放時間，橙色進度條長度也會隨著按鈕的滑動而改變，當滑動結束時，橙色區域停留在滑動結束的位置，歌曲從當前進度開始播放。

③：點擊進度條，橙色進度條長度變為點擊處至起點的長度，并從當前點開始播放歌曲。

大概思路：

①：左邊的時間可以通過audio播放時派發的timeupdate事件獲取，右邊的時間為接口獲取的當前歌曲的總時間。

②：進度條子組件的長度通過父組件傳入一個percent值計算，percent值為播放進度與總進度的比值。

③：進度條的滑動及點擊結束后，需要向父組件傳遞一個percent值，使用this.$emit()像父組件派發事件，父組件中設置事件響應函數，接收percent參數值，用于改變audio中當前播放的音樂進度。

詳細實現，關鍵代碼已經注釋：

先上組件源碼：

<template><div class="progress-bar" ref="progressBar" @click="progressClick"><div class="bar-inner"><div class="progress" ref="progress"></div><div class="progress-btn-wrapper"ref="progressBtn"@touchstart.prevent = "progressTouchStart"@touchmove.prevent = "progressTouchMove"@touchend = "progressTouchEnd"><div class="progress-btn"></div></div></div></div> </template><script type="text/ecmascript-6">// 進度條按鈕寬度,由于style中沒有設置width,因此只能用clientWidth獲取export default {data() {return {btnWidth: {type: Number,default: 0},touchInfo: {initiated: false}}},props: {percent: {type: Number,default: 0}},mounted() {this.btnWidth = document.getElementsByClassName('progress-btn')[0].clientWidth},methods: {// 點擊按鈕progressTouchStart(e) {// 記錄touch事件已經初始化this.touchInfo.initiated = true// 點擊位置this.touchInfo.startX = e.touches[0].pageX// 點擊時進度條長度this.touchInfo.left = this.$refs.progress.clientWidth},// 開始移動progressTouchMove(e) {if (!this.touchInfo.initiated) {return}// 計算移動距離const moveX = e.touches[0].pageX - this.touchInfo.startX// 設置偏移值const offsetWidth = Math.min(Math.max(0, this.touchInfo.left + moveX),this.$refs.progressBar.clientWidth - this.btnWidth)this._setOffset(offsetWidth)},// 移動結束progressTouchEnd(e) {this.touchInfo.initiated = false// 向父組件派發事件,傳遞當前百分比值this._triggerPercent()},// 進度條點擊事件progressClick(e) {console.log('clikc')// 設置進度條及按鈕偏移this._setOffset(e.offsetX)// 通知父組件播放進度變化this._triggerPercent()},_triggerPercent() {const barWidth = this.$refs.progressBar.clientWidth - this.btnWidthconst percent = Math.min(1, this.$refs.progress.clientWidth / barWidth)this.$emit('percentChange', percent)},// 設置偏移_setOffset(offsetWidth) {// 設置進度長度隨著百分比變化this.$refs.progress.style.width = `${offsetWidth}px`// 設置按鈕隨著百分比偏移this.$refs.progressBtn.style.transform = `translate3d(${offsetWidth}px, 0, 0)`}},watch: {// 監聽歌曲播放百分比變化percent(newPercent, oldPercent) {if (newPercent > 0 && !this.touchInfo.initiated) {// 進度條總長度const barWidth = this.$refs.progressBar.clientWidth - this.btnWidthconst offsetWidth = barWidth * newPercent// 設置進度條及按鈕偏移this._setOffset(offsetWidth)}}}} </script><style lang="stylus" rel="stylesheet/stylus">@import "~common/stylus/variable.styl".progress-barheight 0.5rem.bar-innerposition relativetop 0.2remheight 0.08rembackground rgba(0, 0, 0, 0.3).progressposition absoluteheight 100%background $color-theme.progress-btn-wrapperposition absoluteleft -0.25remtop -0.25remwidth 0.5remheight 0.5rem.progress-btnposition relativetop 0.12remleft 0.12rembox-sizing border-boxwidth 0.32remheight 0.32remborder 0.06rem solid $color-textborder-radius 50%background $color-theme </style>
此為progerss-bar.vue組件源碼，組件所需要父組件傳入的值只有一個“percent”，為父組件中audio當前播放時間與總時間的比值，用于計算此組件中橙色進度條的長度。

組件的使用：

首先導入并注冊組件（在此不做解釋），隨后使用此組件，dom：

<div class="progress-wrapper"><span class="time time-l">{{formatTime(currentTime)}}</span><div class="progress-bar-wrapper"><progress-bar :percent="percent" @percentChange="setProgress"></progress-bar></div><span class="time time-r">{{formatTime(currentSong.duration)}}</span></div>解釋：兩個span為左右兩個時間值，progress-bar為調用的組件，需要傳入percent值，用于子組件設置進度條長度

percent值來自于audio的currenTime與歌曲總長度的比值：

// 計算百分比percent() {return Math.min(1, this.currentTime / this.currentSong.duration)}

@percentChange為子組件中派發過來的事件，詳細請看子組件中源碼及注釋“_triggerPercent()”部分，此事件調用的方法用于接收子組件傳過來的拖動按鈕、點擊進度條改變歌曲播放進度后的播放百分比，用于改變父組件中audio標簽的currentTime，進而將歌曲播放進度設置為當前時間。

以下為父組件中，接收到子組件派發過來的事件后調用的函數。

// 設置進度setProgress(percent) {// 根據子組件傳過來的百分比設置播放進度this.$refs.audio.currentTime = this.currentSong.duration * percent// 拖動后設置歌曲播放if (!this.playing) {this.togglePlaying()}},

樣式（本人使用stylus）：

.progress-wrapperdisplay flex.timefont-size 0.24rem&.time-lposition absolutebottom 1.62remleft 1rem&.time-rposition absolutebottom 1.62remright 1rem.progress-bar-wrapperposition absolutebottom 1.5remleft 1.7remwidth 4.2rem
至此，進度條組件的實現及使用方法均介紹完畢。

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的基于vue2.0实现音乐/视频播放进度条组件的思路及具体实现方法+代码解释的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。