這篇文章主要為大家詳細介紹了vue-music關於Player播放器組件的相關資料，具有一定的參考價值，有興趣的小夥伴們可以參考一下
本文實例為大家分享了關於Player播放器元件的具體內容，供大家參考，具體內容如下
#迷你播放器：
1.播放器元件會在各個頁面的情況下會開啟。首先在vuex state.js 中定義全域的播放器狀態
import {playMode} from 'common/js/config.js';
const state = {
singer:{},
playing:false, //是否播放
fullScreen:false, //是否全屏
playList:[], //播放列表
sequenceList:[], // 非顺序播放列表
mode:playMode.sequence, // 播放模式（顺序0，循环1，随机2）
currentIndex:-1, //当前播放索引
}
export default state
---------------------------------------------
// config.js
export const playMode = {
sequence:0,
loop:1,
random:2
}2.進入播放器頁面時取得播放清單數據，改變播放狀態 在music-list清單中開啟
#在song -list 元件中派發事件到父元件，傳入目前歌曲的訊息和索引
<li @click="selectItem(song,index)" v-for="(song,index) in songs" class="item">
------------------------------
selectItem(item,index){
this.$emit('select',item,index)
},在music-list 元件中接受派發事件。
<song-list :rank="rank" :songs="songs" @select="selectItem"></song-list>
3. 如果commit 多個狀態在actions 裡設定
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 全域狀態，賦值狀態到對應位置（程式碼為完整程式碼，對照後面講解慢慢理解）
<p class="player" v-show="playList.length>0"> // 如果有列表数据则显示
<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> //当前歌曲名称
<h2 class="subtitle" v-html="currentSong.singer"></h2> //当前歌手名
</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>開啟播放器的狀態
import {mapGetters,mapMutations} from 'vuex';
...mapGetters([
'fullScreen',
'playList',
'currentSong',
'playing',
'currentIndex',
])注意：不可在元件中直接賦值改版vuex 中的狀態this.fullScreen = false 需要透過mutations 改變，定義mutation-types 和mutations 然後用vuex的mapMutations 代理方法呼叫
[types.SET_FULL_SCREEN](state, flag) {
state.fullScreen = flag
},
import {mapGetters,mapMutations} from 'vuex';
methods:{
...mapMutations({
setFullScreen:"SET_FULL_SCREEN",
}),
back(){
this.setFullScreen(false)
},
}設定點擊播放按鈕方法
reee<i :class="playIcon" @click="togglePlaying"></i>
設定點擊播放上一首和下一首按鈕方法。用mapGetters 取得currentIndex 的值（加一或減一） 並改變，從而改變 currentSong 的狀態，監聽切換播放。判斷播放清單界限重置。
togglePlaying(){
this.setPlayingState(!this.playing); //改变全局变量playing 的属性
},
// 然后watch 监听playing 操作实际的audio 标签的播放暂停
watch:{
playing(newPlaying){
let audio = this.$refs.audio;
this.$nextTick(() => {
newPlaying ? audio.play():audio.pause();
})
}
},
// 用计算属性改变相应的播放暂停图标
playIcon(){
return this.playing? 'icon-pause':'icon-play'
},監聽audio 元素標籤的canpaly 事件，當歌曲加載就緒 和 error 事件，當歌曲發生錯誤的時候，做用戶體驗，防止用戶快速切換導致報錯。
設定songReady 標誌位元如果歌曲還沒準備就緒，點擊下一首的時候直接return false
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;
},進度條
audio元素監聽timeupdate事件取得目前播放時間的可讀寫屬性時間戳記。用formt做格式化時間處理，（_pad 為補零函數）
取得音訊總時長currentSong.duration
data(){
return {
songReady:false,
}
},
ready(){
this.songReady = true;
},
error(){
this.songReady = true;
},<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>建立progress-bar 元件接收pencent 進度參數，設定進度條寬度和小球的位置。 player元件設定計算屬性percent
updateTime(e){
this.currentTime = e.target.currentTime; // 获取当前播放时间段
},
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 = '0' + num;
len ++;
}
return num;
},progress-bar 元件
percent(){
return this.currentTime / this.currentSong.duration // 当前时长除以总时长
},<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>
設定拖曳
在進度條小按鈕progressBtn 上新增touchstart，touchmove，touchend 事件監聽方法，事件加入prevent 防止拖曳預設瀏覽器行為，取得拖曳的資訊進行計算
在實例上建立一個touch 物件維護不同的回呼之間的通訊共享狀態資訊。 touchstart事件方法中 ，先設定this.touch.initated為true，表示拖曳開始。 記錄開始點選位置 e.touches[0].pageX 存到 touch 物件上，記錄目前的進度寬度。
在touchmove 中先判斷 是否先進入了 touchstart 方法，計算得到 移動的位置 減去 點擊開始的位置的 偏移量長度。 let deltax = e.touches[0].pageX - this.touch.startX
就可以 設定進度條 已有的長度加上偏移量長度。最大不能超過父級progressbar 的寬度
呼叫this._offset(offsetWidth) 方法設定進度條寬度
在touchend 事件方法中將this.touch.initated 設為false，表示拖曳結束，並派發事件到player 元件將audio的currentTime 值設為正確值，參數為pencent
在progressbar 中增加點擊事件，呼叫this._offset(e.offsetX)，並且派發事件
const progressBtnWidth = 16 //小球宽度
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)`
}
}
}本文已被整理到了《Vue.js前端元件學習教學》，歡迎大家學習閱讀。
關於vue.js元件的教學課程，請大家點選專題vue.js元件學習教學進行學習。
更多vue學習教學請閱讀專題《vue實戰教學》
上面是我整理給大家的，希望今後會對大家有幫助。
相關文章：
以上是在vue-music中關於Player播放器組件的使用說明的詳細內容。更多資訊請關注PHP中文網其他相關文章！
