您好,登录后才能下订单哦!
本文实例为大家分享了关于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 全局状态,赋值状态到相应位置(代码为完整代码,对照后面讲解慢慢理解)
<div class="player" v-show="playList.length>0"> // 如果有列表数据则显示 <div class="normal-player" v-show="fullScreen"> //如果全屏 <div class="background"> <img :src="currentSong.image" alt="" width="100%" height="100%"> //模糊背景图 </div> <div class="top"> <div class="back" @click="back"> <i class="icon-back"></i> </div> <h2 class="title" v-html="currentSong.name"></h2> //当前歌曲名称 <h3 class="subtitle" v-html="currentSong.singer"></h3> //当前歌手名 </div> <div class="middle"> <div class="middle-l"> <div class="cd-wrapper"> <div class="cd" :class="cdCls"> <img :src="currentSong.image" alt="" class="image"> //封面图 </div> </div> </div> </div> <div class="bottom"> <div class="progress-wrapper"> <span class="time time-l">{{ format(currentTime) }}</span> <div class="progress-bar-wrapper"> <progress-bar :percent="percent" @percentChange="onProgressBarChange"></progress-bar> </div> <span class="time time-r">{{ format(currentSong.duration) }}</span> </div> <div class="operators"> <div class="icon i-left"> <i :class="iconMode" @click="changeMode"></i> </div> <div class="icon i-left" :class="disableCls"> <i @click="prev" class="icon-prev"></i> </div> <div class="icon i-center" :class="disableCls"> <i :class="playIcon" @click="togglePlaying"></i> </div> <div class="icon i-right" :class="disableCls"> <i @click="next" class="icon-next"></i> </div> <div class="icon i-right"> <i class="icon icon-not-favorite"></i> </div> </div> </div> </div> </transition> <transition name="mini"> <div class="mini-player" v-show="!fullScreen" @click="open"> <div class="icon"> <img :src="currentSong.image" alt="" width="40" height="40" :class="cdCls"> </div> <div class="text"> <h3 class="name" v-html="currentSong.name"></h3> <p class="desc" v-html="currentSong.singer"></p> </div> <div class="control"> <i :class="miniIcon" @click.stop="togglePlaying"></i> </div> <div class="control"> <i class="icon-playlist"></i> </div> </div> </transition> <audio :src="currentSong.url" ref="audio" @canplay="ready" @error="error" @timeupdate="updateTime" @ended="end"></audio> </div>
打开播放器的状态
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) }, }
设置点击播放按钮方法
<i :class="playIcon" @click="togglePlaying"></i>
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' },
设置点击播放上一首和下一首按钮方法。用mapGetters 获取currentIndex 的值(加一或减一) 并改变,从而改变 currentSong 的状态,监听切换播放。判断播放列表界限重置。
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 元素标签的canpaly 事件,当歌曲加载就绪 和 error 事件,当歌曲发生错误的时候,做用户体验,防止用户快速切换导致报错。
设置songReady 标志位 如果歌曲没有准备就绪,点击下一首的时候直接return false
data(){ return { songReady:false, } }, ready(){ this.songReady = true; }, error(){ this.songReady = true; },
进度条
audio元素监听 timeupdate 事件获取当前播放时间的 可读写属性 时间戳。用formt做格式化时间处理,(_pad 为补零函数 )
获取音频总时长 currentSong.duration
<div class="progress-wrapper"> <span class="time time-l">{{ format(currentTime) }}</span> <div class="progress-bar-wrapper"> <progress-bar :percent="percent" @percentChange="onProgressBarChange"></progress-bar> </div> <span class="time time-r">{{ format(currentSong.duration) }}</span> </div> <audio :src="currentSong.url" ref="audio" @canplay="ready" @error="error" @timeupdate="updateTime" @ended="end"></audio>
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 组件 接收pencent 进度参数,设置进度条宽度和小球的位置。player组件 设置计算属性percent
percent(){ return this.currentTime / this.currentSong.duration // 当前时长除以总时长 },
progress-bar 组件
<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>
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)` } } }
设置拖动
在进度条小按钮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),并且派发事件
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前端组件学习教程》,欢迎大家学习阅读。
关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。
更多vue学习教程请阅读专题《vue实战教程》
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持亿速云。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。