1. 首页
  2. IT资讯

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

特别鸣谢

感想Binaryify提供的api

嗯,有人吗?

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

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

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

项目截图

登录页

登录页

首页

627fc9502e944992a31a3c6be0f041e2_tplv-k3u1fbpfcp-zoom-1.png

个人中心

个人中心

歌单播放

43c4ad8e57ee48f3a36b25ab684574a5_tplv-k3u1fbpfcp-zoom-1.png

目录说明

# | --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%,历史播放和搜索功能现在还在完善,然后一些细节的处理得看时间处理了,总得来说比较菜。除了整个歌曲的播放流程其它都很简单,后面会慢慢完善。

本文来自投稿,不代表程序员编程网立场,如若转载,请注明出处:http://www.cxybcw.com/202991.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code