這篇文章主要為大家展示了“vue2.0如何實(shí)現(xiàn)音樂(lè)/視頻播放進(jìn)度條組件”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“vue2.0如何實(shí)現(xiàn)音樂(lè)/視頻播放進(jìn)度條組件”這篇文章吧。

創(chuàng)新互聯(lián)建站自2013年起，先為嵊泗等服務(wù)建站，嵊泗等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為嵊泗企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。

基于vue2.0實(shí)現(xiàn)音樂(lè)/視頻播放進(jìn)度條組件的方法及代碼解釋，具體內(nèi)容如下

需求分析：

①：進(jìn)度條隨著歌曲的播放延長(zhǎng)，歌曲播放完時(shí)長(zhǎng)度等于黑色總進(jìn)度條長(zhǎng)度；時(shí)間實(shí)時(shí)更新。

②：當(dāng)滑動(dòng)按鈕時(shí)，實(shí)時(shí)更新播放時(shí)間，橙色進(jìn)度條長(zhǎng)度也會(huì)隨著按鈕的滑動(dòng)而改變，當(dāng)滑動(dòng)結(jié)束時(shí)，橙色區(qū)域停留在滑動(dòng)結(jié)束的位置，歌曲從當(dāng)前進(jìn)度開始播放。

③：點(diǎn)擊進(jìn)度條，橙色進(jìn)度條長(zhǎng)度變?yōu)辄c(diǎn)擊處至起點(diǎn)的長(zhǎng)度，并從當(dāng)前點(diǎn)開始播放歌曲。

大概思路：

①：左邊的時(shí)間可以通過(guò)audio播放時(shí)派發(fā)的timeupdate事件獲取，右邊的時(shí)間為接口獲取的當(dāng)前歌曲的總時(shí)間。

②：進(jìn)度條子組件的長(zhǎng)度通過(guò)父組件傳入一個(gè)percent值計(jì)算，percent值為播放進(jìn)度與總進(jìn)度的比值。

③：進(jìn)度條的滑動(dòng)及點(diǎn)擊結(jié)束后，需要向父組件傳遞一個(gè)percent值，使用this.$emit()像父組件派發(fā)事件，父組件中設(shè)置事件響應(yīng)函數(shù)，接收percent參數(shù)值，用于改變audio中當(dāng)前播放的音樂(lè)進(jìn)度。

詳細(xì)實(shí)現(xiàn)，關(guān)鍵代碼已經(jīng)注釋：

先上組件源碼：

 
 
 
 // 進(jìn)度條按鈕寬度,由于style中沒(méi)有設(shè)置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: { 
   // 點(diǎn)擊按鈕 
   progressTouchStart(e) { 
    // 記錄touch事件已經(jīng)初始化 
    this.touchInfo.initiated = true 
    // 點(diǎn)擊位置 
    this.touchInfo.startX = e.touches[0].pageX 
    // 點(diǎn)擊時(shí)進(jìn)度條長(zhǎng)度 
    this.touchInfo.left = this.$refs.progress.clientWidth 
   }, 
   // 開始移動(dòng) 
   progressTouchMove(e) { 
    if (!this.touchInfo.initiated) { 
     return 
    } 
    // 計(jì)算移動(dòng)距離 
    const moveX = e.touches[0].pageX - this.touchInfo.startX 
    // 設(shè)置偏移值 
    const offsetWidth = Math.min(Math.max(0, this.touchInfo.left + moveX), 
     this.$refs.progressBar.clientWidth - this.btnWidth) 
    this._setOffset(offsetWidth) 
   }, 
   // 移動(dòng)結(jié)束 
   progressTouchEnd(e) { 
    this.touchInfo.initiated = false 
    // 向父組件派發(fā)事件,傳遞當(dāng)前百分比值 
    this._triggerPercent() 
   }, 
   // 進(jìn)度條點(diǎn)擊事件 
   progressClick(e) { 
    console.log('clikc') 
    // 設(shè)置進(jìn)度條及按鈕偏移 
    this._setOffset(e.offsetX) 
    // 通知父組件播放進(jìn)度變化 
    this._triggerPercent() 
   }, 
   _triggerPercent() { 
    const barWidth = this.$refs.progressBar.clientWidth - this.btnWidth 
    const percent = Math.min(1, this.$refs.progress.clientWidth / barWidth) 
    this.$emit('percentChange', percent) 
   }, 
   // 設(shè)置偏移 
   _setOffset(offsetWidth) { 
    // 設(shè)置進(jìn)度長(zhǎng)度隨著百分比變化 
    this.$refs.progress.style.width = `${offsetWidth}px` 
    // 設(shè)置按鈕隨著百分比偏移 
    this.$refs.progressBtn.style.transform = `translate3d(${offsetWidth}px, 0, 0)` 
   } 
  }, 
  watch: { 
   // 監(jiān)聽歌曲播放百分比變化 
   percent(newPercent, oldPercent) { 
    if (newPercent > 0 && !this.touchInfo.initiated) { 
     // 進(jìn)度條總長(zhǎng)度 
     const barWidth = this.$refs.progressBar.clientWidth - this.btnWidth 
     const offsetWidth = barWidth * newPercent 
     // 設(shè)置進(jìn)度條及按鈕偏移 
     this._setOffset(offsetWidth) 
    } 
   } 
  } 
 } 
 
 
 
 @import "~common/stylus/variable.styl" 
 
 .progress-bar 
  height 0.5rem 
  .bar-inner 
   position relative 
   top 0.2rem 
   height 0.08rem 
   background rgba(0, 0, 0, 0.3) 
   .progress 
    position absolute 
    height 100% 
    background $color-theme 
   .progress-btn-wrapper 
    position absolute 
    left -0.25rem 
    top -0.25rem 
    width 0.5rem 
    height 0.5rem 
    .progress-btn 
     position relative 
     top 0.12rem 
     left 0.12rem 
     box-sizing border-box 
     width 0.32rem 
     height 0.32rem 
     border 0.06rem solid $color-text 
     border-radius 50% 
     background $color-theme 

此為progerss-bar.vue組件源碼，組件所需要父組件傳入的值只有一個(gè)“percent”，為父組件中audio當(dāng)前播放時(shí)間與總時(shí)間的比值，用于計(jì)算此組件中橙色進(jìn)度條的長(zhǎng)度。

組件的使用：

首先導(dǎo)入并注冊(cè)組件（在此不做解釋），隨后使用此組件，dom：

 
 {{formatTime(currentTime)}}