vue-desktop-nicemusic 开发 -- 仿网易云音乐项目

特别鸣谢

感想Binaryify提供的api

嗯，有人吗？

好久之前就很想作一个音乐类型的网站，有作过移动端，小程序端，基本中途放弃，想着最近有时间就想着作了一个功能比较完整的项目.

1. 项目使用VUE
2. UI框架是ElementUl
3. css预处理使用的stylus
4. 自定义图标iconfont

gitee地址：vue-desktop-nicemusic
线上地址：http://nicenav.cn/desktop-music

项目截图

登陆页

首页

我的中心

歌单播放

目录说明

# | --dist 生成打包后的文件
# | --node_modules 安装的依赖包
# | --public 静态资源会被输出到目录dist
# | --src
# |   |--api 与后端交互使用相关方法和配置
# |   |   |--services 对应使用的api方法和数据处理
# |   |   |   |--instance.js 封装请求，拦截器等等 （axios，fetch）
# |   |   |   |--home.js home相关api
# |   |   |--config.js 配置生产，开发，测试接口配置
# |   |   |--index.js services文件api，统一出口
# |   |   |--resource.js 全局使用的常量
# |   |--assets 存放静态资源，图片等等
# |   |--components 公用组件
# |   |--model 处理数据，歌曲视频等等...
# |   |--router vue-router相关配置
# |   |   |--index.js 导出路由配置，路由守卫配置
# |   |   |--routes.js 全部路由
# |   |--utils 封装的工具函数
# |   |--views 全部的路由组件
# |   |--app.vue 顶层路由
# |   |--main.js 入口文件

主要功能

歌词处理

使用的是lyric-parser进行歌词解码

async getLyric(id) {
      try {
        let res = await this.$api.getLyric(id)
        if (res.code === 200) {
          let lyric = res.lrc.lyric
          this.currentLyric = new Lyric(lyric, this.lyricHandle)
          if (this.isPureMusic) {
            const timeExp = /\[(\d{2}):(\d{2}):(\d{2})]/g
            this.pureMusicLyric = this.currentLyric.lrc
              .replace(timeExp, '')
              .trim()
            this.playingLyric = this.pureMusicLyric
          } else {
            if (this.playing && this.canLyricPlay) {
              this.currentLyric.seek(this.currentTime * 1000)
            }
            console.log(this.currentLyric)
          }
        }
      } catch (error) {
        this.currentLyric = null
        this.playingLyric = ''
        this.currentLyricNum = 0
      }
    },

切换播放模式

3中播放模式，单曲，循环，随机

export const playMode = {
  sequence: 0,
  loop: 1,
  random: 2
}

切换按钮
<i class="iconfont" :class="modeIcon" @click="changeMode"></i>
computed处理切换以后的图标

modeIcon() {
      return this.mode === playMode.sequence
        ? 'nicexunhuanbofang24'
        : this.mode === playMode.loop
        ? 'nicebofangqidanquxunhuan'
        : 'nicebofangqisuijibofang'
    },

切换播放模式方法

// 切换播放模式
    changeMode() {
      const mode = (this.mode + 1) % 3
      this.setPlayMode(mode)
      let list = null
      if (mode === playMode.random) {
        list = this.utils.shuffle(this.sequenceList)
      } else {
        list = this.sequenceList
      }
      this.resetCurrentIndex(list)
      this.setPlayList(list)
    },

进度条控制

具体方法在progressBar组件

<div class="progress-bar-wrap" @mouseup.self="progressMouseUp($event)">
    <div class="progress-bar" ref="progressBar" @click="progressClick">
      <div class="bar-inner">
        <div class="progress" ref="progress"></div>
        <div
          class="progress-btn"
          ref="progressBtn"
          @mousedown.prevent="progressMouseDown($event)"
          @mouseup="progressMouseUp($event)"
        ></div>
      </div>
    </div>
  </div>

音量控制

// 控制静音
    changeMuted() {
      if (this.isMuted) {
        this.isMuted = false
        this.$refs.audio.muted = false
      } else {
        this.isMuted = true
        this.$refs.audio.muted = true
      }
    },
    // 改变音量
    changeVolume(e) {
      this.volume = e / 100
      this.$refs.audio.volume = e / 100
    },

其它

整个项目大概已完成70%，历史播放和搜索功能如今还在完善，而后一些细节的处理得看时间处理了，总得来讲比较菜。除了整个歌曲的播放流程其它都很简单，后面会慢慢完善。