欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

基于js-base64、lyric-parser、better-scroll实现歌词数据解析、歌词滚动、歌词进度控制功能

程序员文章站 2022-07-08 14:57:24
基于js-base64、lyric-parser、better-scroll实现歌词数据解析、歌词滚动、歌词进度控制功能 需求分析: 后台歌词接口返回的数据如下(base64字...

基于js-base64、lyric-parser、better-scroll实现歌词数据解析、歌词滚动、歌词进度控制功能

需求分析:

后台歌词接口返回的数据如下(base64字符串):

  W3RpOua8lOWRmF0KW2FyOuiWm+S5i+iwpl0KW2FsOue7heWjq10KW2J5Ol0KW29mZnNldD
  owXQpbMDA6MDAuNTZd5ryU5ZGYIC0g6Jab5LmL6LCmClswMDowMi40Ml3or43vvJrolpvk
  uYvosKYKWzAwOjAzLjk5Xeabsu+8muiWm+S5i+iwpgpbMDA6MDUuMzhd57yW5puy77ya6Y
  OR5LyfL+W8oOWuneWuhwpbMDA6MDcuNDVd5Yi25L2c5Lq677ya6LW16Iux5L+KClswMDow
  OS4wOV3lkIjlo7DvvJrotbXoi7Hkv4oKWzAwOjEwLjQ4XeW9lemfs+W4iO+8mueOi+aZk+
  a1twpbMDA6MTEuNzRdClswMDoxMi4zNF3mt7fpn7PluIjvvJrpso3plJAKWzAwOjEzLjg4X
  eavjeW4puWkhOeQhuW3peeoi+W4iO+8mumyjemUkApbMDA6MTYuMTBdClswMDoyMS4yNV3n
  roDljZXngrkKWzAwOjIyLjIxXQpbMDA6MjUuMTZd6K+06K+d55qE5pa55byP566A5Y2V54K
  5ClswMDoyOC4yN10KWzAwOjMwLjIyXemAkui/m+eahOaDhee7quivt+ecgeeVpQpbMDA6Mz
  MuNTdd5L2g5Y+I5LiN5piv5Liq5ryU5ZGYClswMDozNi4yN13liKvorr7orqHpgqPkupvmg
  4XoioIKWzAwOjM5LjA4XQpbMDA6NDIuMjBd5rKh5oSP6KeBClswMDo0My43NF0KWzAwOjQ2
  LjE3XeaIkeWPquaDs+eci+eci+S9oOaAjuS5iOWchgpbMDA6NDkuNDddClswMDo1MS43NF3
  kvaDpmr7ov4fnmoTlpKrooajpnaIKWzAwOjU0LjYwXeWDj+ayoeWkqei1i+eahOa8lOWRmA
  pbMDA6NTcuMjFd6KeC5LyX5LiA55y86IO955yL6KeBClswMDo1OS42OF0KWzAxOjAyLjQ2X
  eivpemFjeWQiOS9oOa8lOWHuueahOaIkea8lOinhuiAjOS4jeingQpbMDE6MDcuMDJdClsw
  MTowNy41Nl3lnKjpgLzkuIDkuKrmnIDniLHkvaDnmoTkurrljbPlhbTooajmvJQKWzAxOjE
  yLjE5XQpbMDE6MTIuODZd5LuA5LmI5pe25YCZ5oiR5Lus5byA5aeL5pS26LW35LqG5bqV57

解析成歌词并应用,实现歌词随着播放进度滚动,显示当前歌词,可以对歌词的进度进行控制(即改变歌曲进度,歌词会进行相应调整)

基于js-base64、lyric-parser、better-scroll实现歌词数据解析、歌词滚动、歌词进度控制功能

使用到的库:js-base64、lyric-parser、better-scroll,相关API建议先到github了解一下。

在dependencies中添加这两个库,然后npm install 一下即可,需要使用时引入。

基于js-base64、lyric-parser、better-scroll实现歌词数据解析、歌词滚动、歌词进度控制功能

安装好依赖库后:

第一步:使用js-base64对歌词进行解析:

基于js-base64、lyric-parser、better-scroll实现歌词数据解析、歌词滚动、歌词进度控制功能

解析后的歌词信息变成了可以识别的字符串,如下:

基于js-base64、lyric-parser、better-scroll实现歌词数据解析、歌词滚动、歌词进度控制功能

第二步:使用lyric-parser解析歌词字符串,使其成为能使用的数据格式:

基于js-base64、lyric-parser、better-scroll实现歌词数据解析、歌词滚动、歌词进度控制功能

基于js-base64、lyric-parser、better-scroll实现歌词数据解析、歌词滚动、歌词进度控制功能

至此,歌词已被改成了我们需要的数据格式,如下:

基于js-base64、lyric-parser、better-scroll实现歌词数据解析、歌词滚动、歌词进度控制功能

第三步:应用歌词数据,以vue应用举例:

template:

          

{{line.txt}}

解释:scroll为本人之前写的一个组件,基于better-scroll,组件详情请看本人之前写的博客https://blog.csdn.net/fabulous1111/article/details/78848971,组件应用于此是为了实现歌词的滚动,给当前歌词绑定一个current类,用于将当前播放歌词显示成高亮状态。

methods:

使用到lyric-parser以及better-scroll,通过scrollToElement实现歌词的自动滚动相关API建议先到github了解一下:

  getLyric() {
        this.currentSong.getLyric().then((lyric) => {
          // 新建歌词对象
          this.currentLyric = new Lyric(lyric, this.handleLyric)
          console.log(this.currentLyric)
          debugger
          if (this.playing) {
            this.currentLyric.play()
          }
        })
      },
      handleLyric({lineNum, txt}) {
        this.currentLineNum = lineNum
        // 若当前行大于5,开始滚动,以保歌词显示于中间位置
        if (lineNum > 5) {
          let lineEl = this.$refs.lyricLine[lineNum - 5]
          this.$refs.lyricList.scrollToElement(lineEl, 1000)
        } else {
          this.$refs.lyricList.scrollToElement(0, 0, 1000)
        }
      }

其他相关操作:

①:歌曲变化时的清空操作

基于js-base64、lyric-parser、better-scroll实现歌词数据解析、歌词滚动、歌词进度控制功能

②:单曲循环模式下的处理:

基于js-base64、lyric-parser、better-scroll实现歌词数据解析、歌词滚动、歌词进度控制功能

③:歌曲暂停/播放时,歌词的暂停与播放

基于js-base64、lyric-parser、better-scroll实现歌词数据解析、歌词滚动、歌词进度控制功能

④:改变歌曲播放进度后,歌词的设置

基于js-base64、lyric-parser、better-scroll实现歌词数据解析、歌词滚动、歌词进度控制功能