當前位置：首頁 > 前端技术 > vue >内容正文

vue

【音乐App】—— Vue-music 项目学习笔记：播放器内置组件开发（一）

發布時間：2025/4/16 vue 80 豆豆

生活随笔收集整理的這篇文章主要介紹了【音乐App】—— Vue-music 项目学习笔记：播放器内置组件开发（一）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

前言：以下內容均為學習慕課網高級實戰課程的實踐爬坑筆記。

項目github地址：https://github.com/66Web/ljq_vue_music，歡迎Star。


播放暫停	前進后退

一、播放器Vuex數據設計

需求：播放器可以通過歌手詳情列表、歌單詳情列表、排行榜、搜索結果多種組件打開，因此播放器數據一定是全局的
state.js目錄下：定義數據 import {playMode} from '@/common/js/config'const state = {singer: {},playing: false, //播放狀態fullScreen: false, //播放器展開方式：全屏或收起playlist: [], //播放列表（隨機模式下與順序列表不同）sequenceList: [], //順序播放列表mode: playMode.sequence, //播放模式: 順序、循環、隨機currentIndex: -1 //當前播放歌曲的index(當前播放歌曲為playlist[index]) }
common->js目錄下：創建config.js配置項目相關 //播放器播放模式: 順序、循環、隨機 export const playMode = {sequence: 0, loop: 1,random: 2 }

getter.js目錄下：數據映射（類似于計算屬性） export const playing = state => state.playing export const fullScreen = state => state.fullScreen export const playlist = state => state.playlist export const sequenceList = state => state.sequenceList export const mode = state => state.mode export const currentIndex = state => state.currentIndexexport const currentSong = (state) => {return state.playlist[state.currentIndex] || {} }
組件中可以通過mapgetters拿到這些數據

mutaion-type.js目錄下：定義事件類型字符串常量 export const SET_PLAYING_STATE = 'SET_PLAYING_STATE' export const SET_FULL_SCREEN = 'SET_FULL_SCREEN' export const SET_PLAYLIST = 'SET_PLAYLIST' export const SET_SEQUENCE_LIST = 'SET_SEQUENCE_LIST' export const SET_PLAY_MODE = 'SET_PLAY_MODE' export const SET_CURRENT_INDEX = 'SET_CURRENT_INDEX'
mutation中都是動作，前綴加SET、UPDATE等

mutaion.js目錄下：操作state const mutations = {[types.SET_SINGER](state, singer){state.singer = singer},[types.SET_PLAYING_STATE](state, flag){state.playing = flag},[types.SET_FULL_SCREEN](state, flag){state.fullScreen = flag},[types.SET_PLAYLIST](state, list){state.playlist = list},[types.SET_SEQUENCE_LIST](state, list){state.sequenceList = list},[types.SET_PLAY_MODE](state, mode){state.mode = mode},[types.SET_CURRENT_INDEX](state, index){state.currentIndex = index} }

二、播放器Vuex的相關應用

components->player目錄下：創建player.vue

基礎DOM: <div class="normal-player">播放器 </div> <div class="mini-player"></div>

?App.vue中應用player組件：因為它不是任何一個路由相關組件，而是應用相關播放器，切換路由不會影響播放器的播放 <player></player>

player.vue中獲取數據：控制播放器的顯示隱藏 import {mapGetters} from 'vuex'computed: {...mapGetters(['fullScreen','playlist']) }
通過v-show判斷播放列表有內容時，顯示播放器，依據fullScreen控制顯示不同的播放器
<div class="player" v-show="playlist.length"><div class="normal-player" v-show="fullScreen">播放器</div><div class="mini-player" v-show="!fullScreen"></div> </div>
song-list.vue中添加點擊播放事件：基礎組件不寫業務邏輯，只派發事件并傳遞相關數據 @click="selectItem(song, index) selectItem(item, index){this.$emit('select', item, index) }
子組件行為，只依賴本身相關，不依賴外部調用組件的需求，傳出的數據可以不都使用
music-list.vue中監聽select事件 <song-list :songs="songs" @select="selectItem"></song-list>

設置數據，提交mutations：需要在一個動作中多次修改mutations，在actions.js中封裝 import * as types from './mutation-types'export const selectPlay = function ({commit, state}, {list, index}) {//commit方法提交mutation 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) }

music-list.vue中代理actions，并在methods中調用: import {mapActions} from 'vuex' selectItem(item, index){this.selectPlay({list: this.songs,index}) } ...mapActions(['selectPlay' ])

三、播放器基礎樣式及歌曲數據的應用

?通過mapGetter獲取到currentSong數據填入到DOM中：點擊切換播放器展開收起,需要修改fullScreen import {mapGetters, mapMutations} from 'vuex'methods: {back() {//錯誤做法： this.fullScreen = false//正確做法：通過mapMutations寫入 this.setFullScreen(false)},open() {this.setFullScreen(true)},...mapMutations({setFullScreen: 'SET_FULL_SCREEN'}) }

四、播放器展開收起動畫

需求：normal-player背景圖片漸隱漸現，展開時頭部標題從頂部下落，底部按鈕從底部回彈，收起時相反
實現：動畫使用<transition>，回彈效果使用貝塞爾曲線

normal-player設置動畫<transition name="normal"> &.normal-enter-active, &.normal-leave-activetransition: all 0.4s.top, .bottomtransition: all 0.4s cubic-bezier(0.86, 0.18, 0.82, 1.32) &.normal-enter, &.normal-leave-toopacity: 0.toptransform: translate3d(0, -100px, 0).bottomtransform: translate3d(0, 100px, 0)

mini-player設置動畫<transition name="mini"> &.mini-enter-active, &.mini-leave-activetransition: all 0.4s &.mini-enter, &.mini-leave-toopacity: 0

需求：展開時，mini-player的專輯圖片從原始位置飛入CD圖片位置，同時有一個放大縮小效果, 對應頂部和底部的回彈；收起時，normal-player的CD圖片從原始位置直接落入mini-player的專輯圖片位置

實現：Vue提供了javascript事件鉤子，在相關的鉤子中定義CSS3動畫即可

利用第三方庫：create-keyframe-animation 使用js編寫CSS3動畫

github地址：https://github.com/HenrikJoreteg/create-keyframe-animation

安裝：? npm install create-keyframe-animation --save　　

引入： import animations from 'create-keyframe-animation' <transition name="normal" @enter="enter" @after-enter="afterEnter" @leave="leave" @after-leave="afterLeave">

methods中封裝函數_getPosAndScale獲取初始位置及縮放尺寸: （計算以中心點為準） _getPosAndScale(){ const targetWidth = 40 //mini-player icon寬度const width = window.innerWidth * 0.8 //cd-wrapper寬度const paddingLeft = 40 const paddingTop = 80const paddingBottom = 30 //mini-player icon中心距底部位置const scale = targetWidth / widthconst x = -(window.innerWidth / 2 - paddingLeft) //X軸方向移動的距離const y = window.innerHeight - paddingTop - width / 2 - paddingBottomreturn {x,y, scale} }

給cd-wrapper添加引用： <div class="cd-wrapper" ref="cdWrapper">

定義事件鉤子方法： //事件鉤子：創建CSS3動畫 enter(el, done){const {x, y, scale} = this._getPosAndScale()let animation = {0: {transform: `translate3d(${x}px, ${y}px, 0) scale(${scale})`},60: {transform: `translate3d(0, 0, 0) scale(1.1)`}, 100: {transform: `translate3d(0, 0, 0) scale(1)`}}animations.registerAnimation({name: 'move',animation,presets: {duration: 400,easing: 'linear'}})animations.runAnimation(this.$refs.cdWrapper, 'move', done) }, afterEnter() {animations.unregisterAnimation('move')this.$refs.cdWrapper.style.animation = '' }, leave(el, done){this.$refs.cdWrapper.style.transition = 'all 0.4s'const {x, y, scale} = this._getPosAndScale()this.$refs.cdWrapper.style[transform] = `translate3d(${x}px, ${y}px, 0) scale(${scale})`this.$refs.cdWrapper.addEventListener('transitionend', done) }, afterLeave(){this.$refs.cdWrapper.style.transition = ''this.$refs.cdWrapper.style[transform] = '' }

transform屬性使用prefix自動添加前綴： import {prefixStyle} from '@/common/js/dom' const transform = prefixStyle('transform')

五、播放器歌曲播放功能實現--H5 audio

添加H5 <audio>實現歌曲的播放 <audio :src="currentSong.url" ref="audio"></audio>
在watch中監聽currentSong的變化，播放歌曲 watch: {currentSong() {this.$nextTick(() => { //確保DOM已存在this.$refs.audio.play()})} }
給按鈕添加點擊事件，控制播放暫停 <i class="icon-play" @click="togglePlaying"></i>

通過mapGetters獲得playing播放狀態

通過mapMutations定義setPlayingState方法修改mutation： setPlayingState: 'SET_PLAYING_STATE'

定義togglePlaying()修改mutation：傳遞!playing為payload參數 togglePlaying(){this.setPlayingState(!this.playing) }

在watch中監聽playing的變化，執行播放器的播放或暫停： playing(newPlaying){const audio = this.$refs.audiothis.$nextTick(() => { //確保DOM已存在newPlaying ? audio.play() : audio.pause()}) }

坑：調用audio標簽的play()或pause()，都必須是在DOM audio已經存在的情況下，否則就會報錯

解決：在this.$nextTick(() => { })中調用

圖標樣式隨播放暫停改變：動態綁定class屬性playIcon，替換掉原原來的icon-play <i :class="playIcon" @click="togglePlaying"></i> playIcon() {return this.playing ? 'icon-pause' : 'icon-play' }
CD 旋轉動畫效果

動態綁定class屬性cdCls: <div class="cd" :class="cdCls"> cdCls() {return this.playing ? 'play' : 'pause' }

CSS樣式： &.playanimation: rotate 20s linear infinite &.pauseanimation-play-state: paused@keyframes rotate0%transform: rotate(0)100%transform: rotate(360deg)

六、播放器歌曲前進后退功能實現

給按鈕添加點擊事件 <i class="icon-prev" @click="prev"></i> <i class="icon-next" @click="next"></i>
通過mapGetters獲得currentIndex當前歌曲index
通過mapMutations定義setCurrentIndex方法修改mutation setCurrentIndex: 'SET_CURRENT_INDEX'
定義prev()和next()修改mutation: 限制index邊界 next() {let index = this.currentIndex + 1if(index === this.playlist.length){index = 0}this.setCurrentIndex(index) }, prev() {let index = this.currentIndex - 1if(index === -1){index = this.playlist.length - 1}this.setCurrentIndex(index) }
坑：前進或后退后會自動開始播放，但播放按鈕的樣式沒有改變
解決：添加判斷，如果當前是暫停狀態, 切換為播放 if(!this.playing){this.togglePlaying() }
坑：切換太快會出現報錯：Uncaught (in promise) DOMException: The play() request was interrupted by a new load request
原因：切換太快audio 數據還沒有加載好
解決：audio W3C文檔中記錄，audio有兩個事件：

當歌曲地址請求到時，會派發canplay事件；

當沒有請求到或請求錯誤時，會派發error事件 <audio :src="currentSong.url" ref="audio" @canplay="ready" @error="error"></audio>

在data中維護一個標志位數據songReady，通過ready方法控制只有歌曲數據請求好后，才可以播放

data() {return {songReady: false} } ready() {this.songReady = true }

在prev()、next()和togglePlaying中添加判斷，當歌曲數據還沒有請求好的時候，不播放

if(!this.songReady){return }

其中prev()和next()中歌曲發生改變了之后，重置songReady為false，便于下一次ready()

this.songReady = false

坑：當沒有網絡，或切換歌曲的url有問題時，songReady就一直為false，所有播放的邏輯就執行不了了
解決： error()中也使songReady為true，這樣既可以保證播放功能的正常使用，也可以保證快速點擊時不報錯
優化：給按鈕添加disable的樣式 <div class="icon i-left" :class="disableCls"> <div class="icon i-center" :class="disableCls"> <div class="icon i-right" :class="disableCls"> disableCls() {return this.songReady ? '' : 'disable' } &.disablecolor: $color-theme-d

七、播放器時間獲取

data中維護currentTime當前播放時間：currentTime: 0 （audio的可讀寫屬性）
audio中監聽時間更新事件： @timeupdate="updateTime"
methods中定義updateTime()獲取當前時間的時間戳，并封裝format函數格式化： //獲取播放時間 updateTime(e) {this.currentTime = e.target.currentTime //時間戳 }, format(interval){interval = interval | 0 //向下取整const minute = interval / 60 | 0const second = this._pad(interval % 60)return `${minute}:${second}` }
坑：秒一開始顯示個位只有一位數字，體驗不好
解決：定義_pad()用0補位 _pad(num, n = 2){ //用0補位，補2位字符串長度let len = num.toString().lengthwhile(len < n){num = '0' + numlen++}return num }
格式化后的數據填入DOM，顯示當前播放時間和總時間： <span class="time time-l">{{format(currentTime)}}</span> <span class="time time-r">{{format(currentSong.duration)}}</span>

八、播放器progress-bar進度條組件實現

base->progress-bar目錄下：創建progress-bar.vue

? ? ?? 需求：進度條和小球隨著播放時間的變化而變化

實現：

從父組件接收props參數：進度比percent（player.vue中通過計算屬性得到）

watch中監聽percent，通過計算進度條總長度和偏移量，動態設置進度條的width和小球的transform const progressBtnWidth = 16 //通過樣式設置得到 props: {percent: {type: Number,default: 0} }, watch: {percent(newPercent) {if(newPercent >= 0){const barWidth = this.$refs.progressBar.clientWidth - progressBtnWidthconst offsetWidth = newPercent * barWidththis.$refs.progress.style.width = `${offsetWidth}px` //進度條偏移this.$refs.progressBtn.style[transform] = `translate3d(${offsetWidth}px, 0, 0)` //小球偏移 }} }

? ? ? ?需求：拖動進度條控制歌曲播放進度

實現：

監聽touchstart、touchmove、touchend事件，阻止瀏覽器默認行為； <div class="progress-btn-wrapper" ref="progressBtn"@touchstart.prevent="progressTouchStart"@touchmove.prevent="progressTouchMove"@touchend="progressTouchEnd">

created()中創建touch空對象，用于掛載共享數據； created(){this.touch = {} }

methods中定義3個方法，通過計算拖動偏移量得到進度條總偏移量，并派發事件給父組件： progressTouchStart(e) {this.touch.initiated = true //標志位表示初始化this.touch.startX = e.touches[0].pageX //當前拖動點X軸位置this.touch.left = this.$refs.progress.clientWidth //當前進度條位置 }, progressTouchMove(e) {if(!this.touch.initiated){return}const barWidth = this.$refs.progressBar.clientWidth - progressBtnWidthconst deltaX = e.touches[0].pageX - this.touch.startX //拖動偏移量const offsetWidth = Math.min(barWidth, Math.max(0, this.touch.left + deltaX))this._offset(offsetWidth) }, progressTouchEnd() {this.touch.initiated = falsethis._triggerPercent() }, _triggerPercent(){const barWidth = this.$refs.progressBar.clientWidth - progressBtnWidthconst percent = this.$refs.progress.clientWidth / barWidththis.$emit('percentChange', percent) }, _offset(offsetWidth){this.$refs.progress.style.width = `${offsetWidth}px` //進度條偏移this.$refs.progressBtn.style[transform] = `translate3d(${offsetWidth}px, 0, 0)` //小球偏移 }

watch中添加條件設置拖動時，進度條不隨歌曲當前進度而變化： watch: {percent(newPercent) {if(newPercent >= 0 && !this.touch.initiated){const barWidth = this.$refs.progressBar.clientWidth - progressBtnWidthconst offsetWidth = newPercent * barWidththis._offset(offsetWidth)}} }

player.vue組件中監聽percentChange事件，將改變后的播放時間寫入currentTime，并設置改變后自動播放： @percentChange="onProgressBarChange" onProgressBarChange(percent) {this.$refs.audio.currentTime = this.currentSong.duration * percentif(!this.playing){this.togglePlaying()} }

? ? ?? 需求：點擊進度條任意位置，改變歌曲播放進度

實現：添加點擊事件，通過react.left計算得到偏移量，設置進度條偏移，并派發事件改變歌曲播放時間 <div class="progress-bar" ref="progressBar" @click="progressClick"> progressClick(e) {const rect = this.$refs.progressBar.getBoundingClientRect()const offsetWidth = e.pageX - rect.leftthis._offset(offsetWidth)this._triggerPercent() }

九、播放器progress-circle圓形進度條實現 -- SVG

base->progress-circle目錄下：創建progress-circle.vue

使用SVG實現圓： <div class="progress-circle"><svg :width="radius" :height="radius" viewBox="0 0 100 100" version="1.1"xmlns="http://www.w3.org/2000/svg"><circle class="progress-backgroud" r="50" cx="50" cy="50" fill="transparent"/><circle class="progress-bar" r="50" cx="50" cy="50" fill="transparent" :stroke-dasharray="dashArray" :stroke-dashoffset="dashOffset"/></svg><slot></slot> </div>

需要從父組件接收props參數：視口半徑、當前歌曲進度百分比 props: {radius: {type: Number,default: 100},percent: {type: Number,default: 0} }

player.vue中使圓形進度條包裹mini-player的播放按鈕，并傳入半徑和百分比： <progress-circle :radius="radius" :percent="percent"><i :class="miniIcon" @click.stop.prevent="togglePlaying" class="icon-mini"></i> </progress-circle>
progress-circle.vue中維護數據dashArray，并使用computed計算出當前進度對應的偏移量： data() {return {dashArray: Math.PI * 100 //圓周長描邊總長 } }, computed: {dashOffset() { return (1 - this.percent) * this.dashArray //描邊偏移量 } }

?注：項目來自慕課網

轉載于:https://www.cnblogs.com/ljq66/p/10167951.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的【音乐App】—— Vue-music 项目学习笔记：播放器内置组件开发（一）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：第五章：条件、循环以及其他语句（上）
下一篇： ORACEL游标的使用实例