vue2.0實現(xiàn)音樂/視頻播放進度條組件

更新時間：2021年09月03日 15:46:49 作者：ECMAScripter

這篇文章主要為大家詳細介紹了vue2.0實現(xiàn)音樂和視頻播放進度條組件的思路及具體實現(xiàn)方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

需求分析：

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

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

③：點擊進度條，橙色進度條長度變?yōu)辄c擊處至起點的長度，并從當前點開始播放歌曲。

大概思路：

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

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

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

詳細實現(xiàn)，關鍵代碼已經(jīng)注釋：

先上組件源碼：

<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事件已經(jīng)初始化 
    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 
    // 向父組件派發(fā)事件,傳遞當前百分比值 
    this._triggerPercent() 
   }, 
   // 進度條點擊事件 
   progressClick(e) { 
    console.log('clikc') 
    // 設置進度條及按鈕偏移 
    this._setOffset(e.offsetX) 
    // 通知父組件播放進度變化 
    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) 
   }, 
   // 設置偏移 
   _setOffset(offsetWidth) { 
    // 設置進度長度隨著百分比變化 
    this.$refs.progress.style.width = `${offsetWidth}px` 
    // 設置按鈕隨著百分比偏移 
    this.$refs.progressBtn.style.transform = `translate3d(${offsetWidth}px, 0, 0)` 
   } 
  }, 
  watch: { 
   // 監(jiān)聽歌曲播放百分比變化 
   percent(newPercent, oldPercent) { 
    if (newPercent > 0 && !this.touchInfo.initiated) { 
     // 進度條總長度 
     const barWidth = this.$refs.progressBar.clientWidth - this.btnWidth 
     const offsetWidth = barWidth * newPercent 
     // 設置進度條及按鈕偏移 
     this._setOffset(offsetWidth) 
    } 
   } 
  } 
 } 
</script> 
 
<style lang="stylus" rel="stylesheet/stylus"> 
 @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 
</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為子組件中派發(fā)過來的事件，詳細請看子組件中源碼及注釋“_triggerPercent()”部分，此事件調用的方法用于接收子組件傳過來的拖動按鈕、點擊進度條改變歌曲播放進度后的播放百分比，用于改變父組件中audio標簽的currentTime，進而將歌曲播放進度設置為當前時間。

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

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

樣式（本人使用stylus）：

.progress-wrapper 
     display flex 
     .time 
      font-size 0.24rem 
      &.time-l 
       position absolute 
       bottom 1.62rem 
       left 1rem 
      &.time-r 
       position absolute 
       bottom 1.62rem 
       right 1rem 
     .progress-bar-wrapper 
      position absolute 
      bottom 1.5rem 
      left 1.7rem 
      width 4.2rem

至此，進度條組件的實現(xiàn)及使用方法均介紹完畢。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: