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

前言：以下内容均为学习慕课网高级实战课程的实践爬坑笔记。

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


播放模式切换	歌词滚动显示

一、播放器模式切换功能实现

按钮样式随模式改变而改变

动态绑定iconMode图标class：

<i :class="iconMode"></i>

import {playMode} from '@/common/js/config'

iconMode(){

    return this.mode === playMode.sequence ? 'icon-sequence' : this.mode === playMode.loop ? 'icon-loop' : 'icon-random'

}

给按钮添加点击事件，通过mapGetters获取mode，通过mapMutaions修改：

<div class="icon i-left" @click="changeMode">

changeMode(){

   const mode = (this.mode + 1) % 3

   this.setPlayMode(mode)

}

setPlayMode: 'SET_PLAY_MODE'

播放列表顺序随模式改变而改变

common->js目录下：创建util.js，提供工具函数

function getRandomInt(min, max){

    return Math.floor(Math.random() * (max - min + 1) + min)

}

//洗牌: 遍历arr， 从0-i 之间随机取一个数j，使arr[i]与arr[j]互换

export function shuffle(arr){

   let _arr = arr.slice() //改变副本，不修改原数组 避免副作用

   for(let i = 0; i<_arr.length; i++){

        let j = getRandomInt(0, i)

        let t = _arr[i]

        _arr[i] = _arr[j]

        _arr[j] = t

   }

   return _arr

}

通过mapGetters获取sequenceList，在changeMode()中判断mode，通过mapMutations修改playlist

changeMode(){

      const mode = (this.mode + 1) % 3

      this.setPlayMode(mode)

      let list = null

      if(mode === playMode.random){

         list = shuffle(this.sequenceList)

      }else{

         list = this.sequenceList

      }

      this.resetCurrentIndex(list)

      this.setPlayList(list)

}

播放列表顺序改变后当前播放歌曲状态不变

findIndex找到当前歌曲id值index，通过mapMutations改变currentIndex，保证当前歌曲的id不变

resetCurrentIndex(list){

    let index = list.findIndex((item) => { //es6语法 findIndex

         return item.id === this.currentSong.id

    })

    this.setCurrentIndex(index)

}

坑：CurrentSong发生了改变，会触发watch中监听的操作，如果当前播放暂停，改变模式会自动播放
解决：添加判断，如果当前歌曲的id不变，认为CurrentSong没变，不执行任何操作

currentSong(newSong, oldSong) {

    if(newSong.id === oldSong.id) {

       return

    }

    this.$nextTick(() => { //确保DOM已存在

         this.$refs.audio.play()

    })

}

当前歌曲播放完毕时自动切换到下一首或重新播放

监听audio派发的ended事件：@ended="end"

end(){

    if(this.mode === playMode.loop){

       this.loop()

    }else{

       this.next()

    }

},

loop(){

    this.$refs.audio.currentTime = 0

    this.$refs.audio.play()

}

“随机播放全部”按钮功能实现

music-list.vue中给按钮监听点击事件

@click="random"

actions.js中添加randomPlay action

import {playMode} from '@/common/js/config'

import {shuffle} from '@/common/js/util'

export const randomPlay = function ({commit},{list}){

     commit(types.SET_PLAY_MODE, playMode.random)

     commit(types.SET_SEQUENCE_LIST, list)

     let randomList = shuffle(list)

     commit(types.SET_PLAYLIST, randomList)

     commit(types.SET_CURRENT_INDEX, 0)

     commit(types.SET_FULL_SCREEN, true)

     commit(types.SET_PLAYING_STATE, true)

}

music-list.vue中定义random方法应用randomPlay

random(){

    this.randomPlay({

        list: this.songs

    })

}

...mapActions([

    'selectPlay',

    'randomPlay'

])

坑：当点击了“随机播放全部”之后，再选择歌曲列表中指定的一首歌，播放的不是所选择的歌曲
原因：切换了随机播放之后，当前播放列表的顺序就不是歌曲列表的顺序了，但选择歌曲时传给currentIndex的index还是歌曲列表的index
解决：在actions.js中的selectPlay action中添加判断，如果是随机播放模式，将歌曲洗牌后存入播放列表，找到当前选择歌曲在播放列表中的index再传给currentIndex

function findIndex(list, song){

    return list.findIndex((item) => {

           return item.id === song.id

    })

}

export const selectPlay = function ({commit, state}, {list, index}) {

    //commit方法提交mutation

    commit(types.SET_SEQUENCE_LIST, list)

    if(state.mode === playMode.random) {

       let randomList = shuffle(list)

       commit(types.SET_PLAYLIST, randomList)

       index = findIndex(randomList, list[index])

   }else{

       commit(types.SET_PLAYLIST, list)

   }

   commit(types.SET_CURRENT_INDEX, index)

   commit(types.SET_FULL_SCREEN, true)

   commit(types.SET_PLAYING_STATE, true)

}

二、播放器歌词数据抓取

src->api目录下：创建song.js

import {commonParams} from './config'

import axios from 'axios'

export function getLyric(mid){

    const url = '/api/lyric'

    const data = Object.assign({}, commonParams, {

             songmid: mid,

             pcachetime: +new Date(),

             platform: 'yqq',

             hostUin: 0,

             needNewCode: 0,

             g_tk: 5381, //会变化，以实时数据为准

             format: 'json' //规定为json请求

   })

    return axios.get(url, {

             params: data

    }).then((res) => {

             return Promise.resolve(res.data)

    })

}

webpack.dev.config.js中通过node强制改变请求头

app.get('/api/lyric', function(req, res){

       var url="https://szc.y.qq.com/lyric/fcgi-bin/fcg_query_lyric_new.fcg"

       axios.get(url, {

            headers: { //通过node请求QQ接口，发送http请求时，修改referer和host

                  referer: 'https://y.qq.com/',

                  host: 'c.y.qq.com'

            },

            params: req.query //把前端传过来的params，全部给QQ的url

       }).then((response) => {

            res.json(response.data)

       }).catch((e) => {

            console.log(e)

       })

})

common->js->song.js中将获取数据的方法封装到class类

getLyric() {

     getLyric(this.mid).then((res) => {

           if(res.retcode === ERR_OK){

               this.lyric = res.lyric

                //console.log(this.lyric)

           }

     })

}

player.vue中调用getLyric()测试

currentSong(newSong, oldSong) {

       if(newSong.id === oldSong.id) {

           return

        }

       this.$nextTick(() => { //确保DOM已存在

           this.$refs.audio.play()

           this.currentSong.getLyric()//测试

       })

}

因为请求后QQ返回的仍然是一个jsonp, 需要在后端中做一点处理

webpack.dev.config.js中通过正则表达式，将接收到的jsonp文件转换为json格式

var ret = response.data

if (typeof ret === 'string') {

    var reg = /^\w+\(({[^()]+})\)$/

    // 以单词a-z，A-Z开头，一个或多个

    // \(\)转义括号以（）开头结尾

    // （）是用来分组

    // 【^()】不以左括号/右括号的字符+多个

    // {}大括号也要匹配到

    var matches = ret.match(reg)

    if (matches) {

        ret = JSON.parse(matches[1])

        // 对匹配到的分组的内容进行转换

    }

}

res.json(ret)

注意：后端配置后都需要重新启动！！！

三、播放器歌词数据解析

js-base64 code解码

npm install js-base64 --save

common->js->song.js中：

import {Base64} from 'js-base64'

this.lyric = Base64.decode(res.lyric)//解码 得到字符串

解析字符串

npm install lyric-parser --save

优化getLyric：如果已经有歌词，不再请求

getLyric() {

    if(this.lyric){

        return Promise.resolve()

    }

    return new Promise((resolve, reject) => {

        getLyric(this.mid).then((res) => {

             if(res.retcode === ERR_OK){

                 this.lyric = Base64.decode(res.lyric)//解码 得到字符串

                 // console.log(this.lyric)

                  resolve(this.lyric)

             }else{

                 reject('no lyric')

             }

       })

   })

}

player.vue中使用lyric-parser,并在data中维护一个数据currentLyric

import Lyric from 'lyric-parser'

//获取解析后的歌词

getLyric() {

   this.currentSong.getLyric().then((lyric) => {

        this.currentLyric = new Lyric(lyric)//实例化lyric对象

        console.log(this.currentLyric)

   })

}

在watch的currentSong()中调用：this.getLyric()

四、播放器歌词滚动列表实现

显示歌词

player.vue中添加DOM结构

<div class="middle-r" ref="lyricList">

       <div class="lyric-wrapper">

              <div v-if="currentLyric">

                    <p ref="lyricLine"

                         class="text"

                         v-for="(line, index) in currentLyric.lines" :key="index"

                         :class="{'current': currentLineNum === index}">

                        {{line.txt}}

                     </p>

              </div>

        </div>

</div>

歌词随歌曲播放高亮显示

在data中维护数据

currentLineNum: 0

初始化lyric对象时传入handleLyric方法，得到当前currentLingNum值，判断如果歌曲播放，调用Lyric的play()

//获取解析后的歌词

getLyric() {

    this.currentSong.getLyric().then((lyric) => {

        //实例化lyric对象

         this.currentLyric = new Lyric(lyric, this.handleLyric)

        // console.log(this.currentLyric)

        if(this.playing){

            this.currentLyric.play()

        }

    })

},

handleLyric({lineNum, txt}){

    this.currentLineNum = lineNum

}

动态绑定current样式，高亮显示index为currentLineNum值的歌词

:class="{'current': currentLineNum === index}"

歌词实现滚动，歌曲播放时当前歌词滚动到中间显示

引用并注册scroll组件

import Scroll from '@/base/scroll/scroll'

使用<scroll>替换<div>，同时传入currentLyric和currentLyric.lines作为data

<scroll class="middle-r" ref="lyricList" :data="currentLyric && currentLyric.lines">

在handleLyric()中添加判断

handleLyric({lineNum, txt}){

   this.currentLineNum = lineNum

   if(lineNum > 5){

      let lineEl = this.$refs.lyricLine[lineNum - 5] //保证歌词在中间位置滚动

      this.$refs.lyricList.scrollToElement(lineEl, 1000)

   }else{

      this.$refs.lyricList.scrollTo(0, 0, 1000)//滚动到顶部

   }

}

此时，如果手动将歌词滚动到其它位置，歌曲播放的当前歌词还是会滚动到中间

五、播放器歌词左右滑动

需求：两个点按钮对应CD页面和歌词页面，可切换

实现：data中维护数据currentShow，动态绑定active class:

currentShow: 'cd'

<div class="dot-wrapper">

   <span class="dot" :class="{'active': currentShow === 'cd'}"></span>

   <span class="dot" :class="{'active': currentShow === 'lyric'}"></span>

</div>

需求：切换歌词页面时，歌词向左滑，CD有一个渐隐效果；反之右滑，CD渐现

实现：【移动端滑动套路】—— touchstart、touchmove、touchend事件 touch空对象

created(){

    this.touch = {}

}

<div class="middle">绑定touch事件：一定记得阻止浏览器默认事件

<div class="middle" @touchstart.prevent="middleTouchStart"

                    @touchmove.prevent="middleTouchMove"

                    @touchend="middleTouchEnd">

实现touch事件的回调函数：touchstart和touchmove的回调函数中要传入event，touchstart中定义初始化标志位initiated

//歌词滑动

middleTouchStart(e){

         this.touch.initiated = true //初始化标志位

         const touch = e.touches[0]

         this.touch.startX = touch.pageX

         this.touch.startY = touch.pageY

 },

middleTouchMove(e){

         if(!this.touch.initiated){

                 return

         }

         const touch = e.touches[0]

         const deltaX = touch.pageX - this.touch.startX

         const deltaY = touch.pageY - this.touch.startY

         //维护deltaY原因：歌词本身Y轴滚动，当|deltaY| > |deltaX|时，不滑动歌词

         if(Math.abs(deltaY) > Math.abs(deltaX)){

               return

         }

         const left = this.currentShow === 'cd' ? 0 : -window.innerWidth

         const offsetWidth = Math.min(0, Math.max(-window.innerWidth, left + deltaX))

         this.touch.percent = Math.abs(offsetWidth / window.innerWidth)

        //滑入歌词offsetWidth = 0 + deltaX(负值)  歌词滑出offsetWidth = -innerWidth + delta(正值)

        this.$refs.lyricList.$el.style[transform] = `translate3d(${offsetWidth}px, 0, 0)`

        this.$refs.lyricList.$el.style[transitionDuration] = 0

        this.$refs.middleL.style.opacity = 1 - this.touch.percent //透明度随percent改变

        this.$refs.middleL.style[transitionDuration] = 0

},

middleTouchEnd(){

        //优化：手动滑入滑出10%时，歌词自动滑过

        let offsetWidth

        let opacity

        if(this.currentShow === 'cd'){

             if(this.touch.percent > 0.1){

                   offsetWidth = -window.innerWidth

                   opacity = 0

                   this.currentShow = 'lyric'

             }else{

                   offsetWidth = 0

                   opacity = 1

             }

       }else{

             if(this.touch.percent < 0.9){

                  offsetWidth = 0

                  opacity = 1

                  this.currentShow = 'cd'

             }else{

                  offsetWidth = -window.innerWidth

                  opacity = 0

             }

       }

       const time = 300

       this.$refs.lyricList.$el.style[transform] = `translate3d(${offsetWidth}px, 0, 0)`

       this.$refs.lyricList.$el.style[transitionDuration] = `${time}ms`

       this.$refs.middleL.style.opacity = opacity

       this.$refs.middleL.style[transitionDuration] = `${time}ms`

 }

坑：

六、播放器歌词剩余功能

坑：切换歌曲后，歌词会闪动
原因：每次都会重新实例化Layric，但前一首的Layric中的定时器还在，造成干扰
解决：在Watch的currentSong()中添加判断，切换歌曲后，如果实例化新的Layric之前有currentLyric，清空其中的定时器

if(this.currentLyric){

   this.currentLyric.stop() //切换歌曲后，清空前一首歌歌词Layric实例中的定时器

}

坑：歌曲暂停播放后，歌词还会继续跳动，并没有被暂停
解决：在togglePlaying()中判断如果存在currentLyric，就调用currentLyric的togglePlay()切换歌词的播放暂停

if(this.currentLyric){

    this.currentLyric.togglePlay()//歌词切换播放暂停

}

坑：单曲循环播放模式下，歌曲播放完毕后，歌词并没有返回到一开始
解决：在loop()中判断如果存在currentLyric，就调用currentLyric的seek()将歌词偏移到最开始

if(this.currentLyric){

   this.currentLyric.seek(0) //歌词偏移到一开始

}

坑：拖动进度条改变歌曲播放进度后，歌词没有随之改变到对应位置
解决：在onProgressBarChange()中判断如果存在currentLyric,就调用seek()将歌词偏移到currentTime*1000位置处

const currentTime = this.currentSong.duration * percent

if(this.currentLyric){

   this.currentLyric.seek(currentTime * 1000)//偏移歌词到拖动时间的对应位置

}

需求：CD页展示当前播放的歌词

<div class="playing-lyric-wrapper">

    <div class="playing-lyric">{{playingLyric}}</div>

</div>

data中维护数据

playingLyric: ''

在回调函数handleLyric()中改变当前歌词：

this.playingLyric = txt

考虑异常情况：如果getLyric()请求失败，做一些清理的操作

getLyric() {

     this.currentSong.getLyric().then((lyric) => {

           //实例化lyric对象

           this.currentLyric = new Lyric(lyric, this.handleLyric)

           //  console.log(this.currentLyric)

           if(this.playing){

              this.currentLyric.play()

           }

     }).catch(() => {

           //请求失败，清理数据

           this.currentLyric = null

           this.playingLyric = ''

           this.currentLineNum = 0

    })

}

考虑特殊情况：如果播放列表只有一首歌，next()中添加判断，使歌曲单曲循环播放；prev()同理

next() {

   if(!this.songReady){

      return

   }

   if(this.playlist.length === 1){ //只有一首歌，单曲循环

      this.loop()

   }else{

      let index = this.currentIndex + 1

   if(index === this.playlist.length){

      index = 0

   }

   this.setCurrentIndex(index)

     if(!this.playing){

        this.togglePlaying()

     }

     this.songReady = false

   }

}

优化：因为手机微信运行时从后台切换到前台时不执行js，要保证歌曲重新播放，使用setTimeout替换nextTick

setTimeout(() => { //确保DOM已存在

    this.$refs.audio.play()

    // this.currentSong.getLyric()//测试歌词

    this.getLyric()

}, 1000)

七、播放器底部播放器适配+mixin的应用

问题：播放器收缩为mini-player之后，播放器占据列表后的一定空间，导致BScroll计算的高度不对，滚动区域受到影响
mixin的适用情况：当多种组件都需要一种相同的逻辑时,引用mixin处可以将其中的代码添加到组件中

mixin详解

vue中提供了一种混合机制--mixins，用来更高效的实现组件内容的复用
组件在引用之后相当于在父组件内开辟了一块单独的空间，来根据父组件props过来的值进行相应的操作，但本质上两者还是泾渭分明，相对独立。
而mixins则是在引入组件之后，则是将组件内部的内容如data等方法、method等属性与父组件相应内容进行合并。相当于在引入后，父组件的各种属性方法都被扩充了。

值得注意的是，在使用mixins时，父组件和子组件同时拥有着子组件内的各种属性方法，但这并不意味着他们同时共享、同时处理这些变量，两者之间除了合并，是不会进行任何通信的
具体使用以及内容合并策略请参照官方API及其他技术贴等

——转载自【木子墨博客】

common->js目录下：创建mixin.js

import {mapGetters} from 'vuex'

export const playlistMixin = {

    computed:{

        ...mapGetters([

            'playlist'

       ])

    },

    mounted() {

       this.handlePlaylist(this.playlist)

    },

    activated() { //<keep-alive>组件切换过来时会触发activated

       this.handlePlaylist(this.playlist)

    },

    watch:{

       playlist(newVal){

            this.handlePlaylist(newVal)

       }

    },

   methods: { //组件中定义handlePlaylist，就会覆盖这个，否则就会抛出异常

      handlePlaylist(){

          throw new Error('component must implement handlePlaylist method')

      }

   }

}

music-list.vue中应用mixin

import {playlistMixin} from '@/common/js/mixin'

mixins: [playlistMixin]

定义handlePlaylist方法，判断如果有playlist，改变改变list的bottom并强制scroll重新计算

handlePlaylist(playlist){

    const bottom = playlist.length > 0 ? '60px' : ''

    this.$refs.list.$el.style.bottom = bottom //底部播放器适配

    this.$refs.list.refresh() //强制scroll重新计算

}

singer.vue中同上：需要在listview.vue中暴露一个refresh方法后，再在singer.vue中调用

refresh() {

    this.$refs.listview.refresh()

}

handlePlaylist(playlist) {

    const bottom = playlist.length > 0 ? '60px' : ''

    this.$refs.singer.style.bottom = bottom //底部播放器适配

    this.$refs.list.refresh() //强制scroll重新计算

}

recommend.vue中同上：

handlePlaylist(playlist){

     const bottom = playlist.length > 0 ? '60px' : ''

     this.$refs.recommend.style.bottom = bottom //底部播放器适配

     this.$refs.scroll.refresh() //强制scroll重新计算

}

注：项目来自慕课网

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

【音乐App】—— Vue-music 项目学习笔记：播放器内置组件开发（二）的相关教程结束。

相关推荐

Selenium 学习笔记

「学习笔记」gdb 调试的简单操作

python教程入门学习笔记第2天第一个python程序代码规范用默认的IDLE (Python GUI)编辑器编写

python教程入门学习笔记第1天初识python python语言环境安装 python编写器

机器学习实战（Machine Learning in Action）学习笔记————03.决策树原理、源码解析及测试

Oracle学习笔记三 SQL命令

Oracle学习笔记四 SQL命令（二）：SQL操作语言类别

「学习笔记」模运算与 BSGS 算法

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

【音乐App】—— Vue-music 项目学习笔记：播放器内置组件开发（二）的相关教程结束。

相关推荐

Selenium 学习笔记

「学习笔记」gdb 调试的简单操作

python教程 入门学习笔记 第2天 第一个python程序 代码规范 用默认的IDLE (Python GUI)编辑器编写

python教程 入门学习笔记 第1天 初识python python语言环境安装 python编写器

机器学习实战（Machine Learning in Action）学习笔记————03.决策树原理、源码解析及测试

Oracle学习笔记三 SQL命令

Oracle学习笔记四 SQL命令（二）：SQL操作语言类别

「学习笔记」模运算与 BSGS 算法

python教程入门学习笔记第2天第一个python程序代码规范用默认的IDLE (Python GUI)编辑器编写

python教程入门学习笔记第1天初识python python语言环境安装 python编写器