這篇文章主要為大家詳細(xì)介紹了vue-music關(guān)于Player播放器組件的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了關(guān)于Player播放器組件的具體內(nèi)容，供大家參考，具體內(nèi)容如下

迷你播放器：

1.播放器組件會(huì)在各個(gè)頁面的情況下會(huì)打開。 首先在vuex state.js 中定義全局的播放器狀態(tài)

import {playMode} from 'common/js/config.js';

const state = {
 singer:{}, 
 playing:false, //是否播放
 fullScreen:false, //是否全屏
 playList:[], //播放列表
 sequenceList:[], // 非順序播放列表
 mode:playMode.sequence, // 播放模式（順序0，循環(huán)1，隨機(jī)2）
 currentIndex:-1, //當(dāng)前播放索引
}
export default state 


---------------------------------------------
// config.js

export const playMode = {
 sequence:0,
 loop:1,
 random:2
}

2.進(jìn)入播放器頁面時(shí)獲取播放列表數(shù)據(jù)，改變播放狀態(tài) 在music-list列表中打開

在song-list 組件中派發(fā)事件到父組件，傳入當(dāng)前歌曲的信息和索引

<li @click="selectItem(song,index)" v-for="(song,index) in songs" class="item">

------------------------------
selectItem(item,index){
 this.$emit(&#39;select&#39;,item,index)
},

在music-list 組件中接受派發(fā)事件。

<song-list :rank="rank" :songs="songs" @select="selectItem"></song-list>

3. 如果commit 多個(gè)狀態(tài)在actions 里設(shè)置

import {playMode} from 'common/js/config.js'

export const selectPlay = function({commit,state},{list,index}){
 commit(types.SET_SEQUENCE_LIST, list)
 commit(types.SET_PLAYLIST, list)
 commit(types.SET_CURRENT_INDEX, index)
 commit(types.SET_FULL_SCREEN, true)
 commit(types.SET_PLAYING_STATE, true)
}

4. 在music-list 組件中 用mapActions提交 改變值

import {mapActions} from 'vuex'

methods:{
 selectItem(item,index){
  this.selectPlay({
  list:this.songs,
  index
  })
 },
 ...mapActions([
  'selectPlay'
 ])
 },

5.在palyer 中獲取vuex 全局狀態(tài)，賦值狀態(tài)到相應(yīng)位置（代碼為完整代碼，對(duì)照后面講解慢慢理解）

<p class="player" v-show="playList.length>0">　　　　// 如果有列表數(shù)據(jù)則顯示
  <p class="normal-player" v-show="fullScreen">　　//如果全屏
   <p class="background">
   <img :src="currentSong.image" alt="" width="100%" height="100%">　　　　//模糊背景圖
   </p>
   <p class="top">
    <p class="back" @click="back">
    <i class="icon-back"></i>
    </p>
    <h1 class="title" v-html="currentSong.name"></h1>　　　　//當(dāng)前歌曲名稱
    <h2 class="subtitle" v-html="currentSong.singer"></h2>　　//當(dāng)前歌手名
   </p>
   <p class="middle">
    <p class="middle-l">
    <p class="cd-wrapper">
     <p class="cd" :class="cdCls">
     <img :src="currentSong.image" alt="" class="image">　　　　//封面圖
     </p>
    </p>
    </p>
   </p>
   <p class="bottom">
   <p class="progress-wrapper">
   <span class="time time-l">{{ format(currentTime) }}</span>
   <p class="progress-bar-wrapper">
    <progress-bar :percent="percent" @percentChange="onProgressBarChange"></progress-bar>
   </p>
   <span class="time time-r">{{ format(currentSong.duration) }}</span>
   </p>
     <p class="operators">
    <p class="icon i-left">
     <i :class="iconMode" @click="changeMode"></i>
    </p>
     <p class="icon i-left" :class="disableCls">
      <i @click="prev" class="icon-prev"></i>
      </p>
      <p class="icon i-center" :class="disableCls">
      <i :class="playIcon" @click="togglePlaying"></i>
      </p>
      <p class="icon i-right" :class="disableCls">
      <i @click="next" class="icon-next"></i>
      </p>
      <p class="icon i-right">
      <i class="icon icon-not-favorite"></i>
      </p>
    </p>
    </p>
   </p>
   </transition>
   <transition name="mini">
    <p class="mini-player" v-show="!fullScreen" @click="open">
     <p class="icon">
      <img :src="currentSong.image" alt="" width="40" height="40" :class="cdCls">
     </p>
     <p class="text">
      <h2 class="name" v-html="currentSong.name"></h2>
      <p class="desc" v-html="currentSong.singer"></p>
     </p>
     <p class="control">
      <i :class="miniIcon" @click.stop="togglePlaying"></i>
     </p>
     <p class="control">
      <i class="icon-playlist"></i>
     </p>
    </p>
   </transition>
   <audio :src="currentSong.url" ref="audio" @canplay="ready" @error="error" @timeupdate="updateTime" @ended="end"></audio>
 </p>

打開播放器的狀態(tài)

import {mapGetters,mapMutations} from 'vuex';

...mapGetters([
 'fullScreen',
 'playList',
 'currentSong',
 'playing',
 'currentIndex',
])

注意：不可在組件中直接賦值改版vuex 中的狀態(tài) this.fullScreen = false 需要通過mutations 改變，定義mutation-types 和mutations 然后 用vuex的 mapMutations 代理方法調(diào)用

[types.SET_FULL_SCREEN](state, flag) {
 state.fullScreen = flag
 },

import {mapGetters,mapMutations} from 'vuex';
methods:{
 ...mapMutations({
 setFullScreen:"SET_FULL_SCREEN", 
 }),
 back(){
 this.setFullScreen(false)
 },
}

設(shè)置點(diǎn)擊播放按鈕方法

 <i :class="playIcon" @click="togglePlaying"></i>

togglePlaying(){
 this.setPlayingState(!this.playing); //改變?nèi)肿兞縫laying 的屬性
},

// 然后watch 監(jiān)聽playing 操作實(shí)際的audio 標(biāo)簽的播放暫停
watch:{
  playing(newPlaying){
   let audio = this.$refs.audio;
   this.$nextTick(() => {
    newPlaying ? audio.play():audio.pause();
   })
  }
 },

// 用計(jì)算屬性改變相應(yīng)的播放暫停圖標(biāo)
playIcon(){
 return this.playing? 'icon-pause':'icon-play'
},

設(shè)置點(diǎn)擊播放上一首和下一首按鈕方法。用mapGetters 獲取currentIndex 的值（加一或減一） 并改變，從而改變 currentSong 的狀態(tài)，監(jiān)聽切換播放。判斷播放列表界限重置。

prev(){
　　　　if(!this.songReady){
　　　　　　return;
　　　　}

 let index = this.currentIndex - 1;
 if(index === -1){　　　　//判斷播放列表界限重置
  index = this.playList.length-1;
 }
 this.setCurrentIndex(index);
 if(!this.playing){　　//判斷是否播放改變播放暫停的icon
  this.togglePlaying();
 }
 this.songReady = false;
},
next(){
 if(!this.songReady){
　　　　return;
　　 }
 let index = this.currentIndex + 1;
 if(index === this.playList.length){　　　　//判斷播放列表界限重置
  index = 0;
 }
 this.setCurrentIndex(index);
 if(!this.playing){
  this.togglePlaying();
 }
 this.songReady = false;
},

監(jiān)聽audio 元素標(biāo)簽的canpaly 事件，當(dāng)歌曲加載就緒 和 error 事件，當(dāng)歌曲發(fā)生錯(cuò)誤的時(shí)候，做用戶體驗(yàn)，防止用戶快速切換導(dǎo)致報(bào)錯(cuò)。

設(shè)置songReady 標(biāo)志位 如果歌曲沒有準(zhǔn)備就緒，點(diǎn)擊下一首的時(shí)候直接return false

data(){
 return {
  songReady:false,
 }
},

ready(){
 this.songReady = true;
},
error(){
 this.songReady = true;
},

進(jìn)度條

audio元素監(jiān)聽 timeupdate 事件獲取當(dāng)前播放時(shí)間的 可讀寫屬性 時(shí)間戳。用formt做格式化時(shí)間處理，（_pad 為補(bǔ)零函數(shù) ）

獲取音頻總時(shí)長(zhǎng) currentSong.duration

<p class="progress-wrapper">
 <span class="time time-l">{{ format(currentTime) }}</span>
 <p class="progress-bar-wrapper">
 <progress-bar :percent="percent" @percentChange="onProgressBarChange"></progress-bar>
 </p>
 <span class="time time-r">{{ format(currentSong.duration) }}</span>
</p>

<audio :src="currentSong.url" ref="audio" @canplay="ready" @error="error" @timeupdate="updateTime" @ended="end"></audio>

updateTime(e){
 this.currentTime = e.target.currentTime; // 獲取當(dāng)前播放時(shí)間段
},

format(interval){
 interval = interval | 0;
 const minute = interval/60 | 0;
 const second = this._pad(interval % 60);
 return `${minute}:${second}`;  
},

_pad(num,n=2){
 let len = num.toString().length;
 while(len<n){
 num = &#39;0&#39; + num;
 len ++;
 }
 return num;
},

建立progress-bar 組件 接收pencent 進(jìn)度參數(shù)，設(shè)置進(jìn)度條寬度和小球的位置。player組件 設(shè)置計(jì)算屬性percent

percent(){
 return this.currentTime / this.currentSong.duration 　// 當(dāng)前時(shí)長(zhǎng)除以總時(shí)長(zhǎng)
},

progress-bar 組件

<p class="progress-bar" ref="progressBar" @click="progressClick">
 <p class="bar-inner">
  <p class="progress" ref="progress"></p>
  <p class="progress-btn-wrapper" ref="progressBtn"
   @touchstart.prevent="progressTouchStart"
   @touchmove.prevent="progressTouchMove"
   @touchend="progressTouchEnd"  
  >
  <p class="progress-btn"></p>
  </p>
 </p>
 </p>

const progressBtnWidth = 16 //小球?qū)挾?
props:{
 percent:{
 type:Number,
 default:0
 }
},


watch:{
 percent(newPercent){
 if(newPercent>=0 && !this.touch.initated){　　　　
  const barWidth = this.$refs.progressBar.clientWidth - progressBtnWidth;
  const offsetWidth = newPercent * barWidth;
  this.$refs.progress.style.width = `${offsetWidth}px`;
  this.$refs.progressBtn.style.transform=`translate3d(${offsetWidth}px,0,0)`
 }
 }
}

設(shè)置拖動(dòng)

在進(jìn)度條小按鈕progressBtn 上添加touchstart，touchmove，touchend 事件監(jiān)聽方法，事件添加 prevent 防止拖動(dòng)默認(rèn)瀏覽器行為，獲取拖動(dòng)的信息進(jìn)行計(jì)算

在實(shí)例上創(chuàng)建一個(gè)touch 對(duì)象維護(hù)不同的回調(diào)之間的通訊共享狀態(tài)信息。 touchstart事件方法中 ，首先設(shè)置this.touch.initated為true，表示拖動(dòng)開始。 記錄開始點(diǎn)擊位置 e.touches[0].pageX 存到 touch 對(duì)象上，記錄當(dāng)前的進(jìn)度寬度。

在touchmove 中首先判斷 是否先進(jìn)入了 touchstart 方法，計(jì)算得到 移動(dòng)的位置 減去 點(diǎn)擊開始的位置的 偏移量長(zhǎng)度。 let deltax = e.touches[0].pageX - this.touch.startX

就可以 設(shè)置進(jìn)度條 已有的長(zhǎng)度加上偏移量長(zhǎng)度。最大不能超過父級(jí)progressbar 的寬度

調(diào)用this._offset(offsetWidth) 方法設(shè)置進(jìn)度條寬度

在touchend 事件方法中將 this.touch.initated 設(shè)置為false，表示拖動(dòng)結(jié)束，并派發(fā)事件到player 組件將audio的currentTime 值設(shè)置為正確值，參數(shù)為pencent

在progressbar 中增加點(diǎn)擊事件，調(diào)用this._offset(e.offsetX)，并且派發(fā)事件

 created(){
 this.touch = {};
 },

methods:{
 progressTouchStart(e){
 this.touch.initiated = true;
 this.touch.startX = e.touches[0].pageX;
 this.touch.left = this.$refs.progress.clientWidth;
 },
 progressTouchMove(e){
 if(!this.touch.initiated){
  return;
 }
 let deltaX = e.touches[0].pageX - this.touch.startX;
 let offsetWidth = Math.min(this.$refs.progressBar.clientWidth - progressBtnWidth,Math.max(0,this.touch.left + deltaX));
 this._offset(offsetWidth);
 },
 progressTouchEnd(e){
 this.touch.initiated = false;
 this._triggerPercent();
 },
 progressClick(e){
 const rect = this.$refs.progressBar.getBoundingClientRect();
 const offsetWidth = e.pageX - rect.left;
 this._offset(offsetWidth);
 // this._offset(e.offsetX);
 this._triggerPercent();
 },
 _offset(offsetWidth){
 this.$refs.progress.style.width = `${offsetWidth}px`;
 this.$refs.progressBtn.style[transform] = `translate3d(${offsetWidth}px,0,0)`;
 },
 _triggerPercent(){
 const barWidth = this.$refs.progressBar.clientWidth - progressBtnWidth;
 const percent = this.$refs.progress.clientWidth / barWidth;
 this.$emit("percentChange",percent)
 }
},

本文已被整理到了《Vue.js前端組件學(xué)習(xí)教程》，歡迎大家學(xué)習(xí)閱讀。

關(guān)于vue.js組件的教程，請(qǐng)大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。

更多vue學(xué)習(xí)教程請(qǐng)閱讀專題《vue實(shí)戰(zhàn)教程》

上面是我整理給大家的，希望今后會(huì)對(duì)大家有幫助。

相關(guān)文章：

在vue.js中如何整合mint-ui里的輪播圖

在Jstree中如何實(shí)現(xiàn)選中父節(jié)點(diǎn)時(shí)被禁用的子節(jié)點(diǎn)也會(huì)選中

在Vue中關(guān)于過濾器filters的用法

在Javascript中自適應(yīng)處理方法

Atas ialah kandungan terperinci 在vue-music中關(guān)于Player播放器組件的使用說明. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!