本文實(shí)例為大家分享了關(guān)于Player播放器組件的具體內(nèi)容，供大家參考，具體內(nèi)容如下
成都創(chuàng)新互聯(lián)是專業(yè)的邵東網(wǎng)站建設(shè)公司，邵東接單;提供成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作,網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行邵東網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!
迷你播放器：
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)前歌曲的信息和索引
在music-list 組件中接受派發(fā)事件。
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ì)照后面講解慢慢理解）
// 如果有列表數(shù)據(jù)則顯示//如果全屏//模糊背景圖
//當(dāng)前歌曲名稱 //當(dāng)前歌手名//封面圖
{{ format(currentTime) }} {{ format(currentSong.duration) }}![]()
打開播放器的狀態(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)擊播放按鈕方法
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í)長 currentSong.duration
{{ format(currentTime) }} {{ format(currentSong.duration) }}
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建立progress-bar 組件 接收pencent 進(jìn)度參數(shù)，設(shè)置進(jìn)度條寬度和小球的位置。player組件 設(shè)置計(jì)算屬性percent
percent(){
return this.currentTime / this.currentSong.duration // 當(dāng)前時(shí)長除以總時(shí)長
},
progress-bar 組件
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)擊開始的位置的 偏移量長度。 let deltax = e.touches[0].pageX - this.touch.startX
就可以 設(shè)置進(jìn)度條 已有的長度加上偏移量長度。最大不能超過父級(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)教程》
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
