這篇文章主要為大家詳細介紹了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中文網其他相關文章!