vue-desktop-nicemusic 開發 -- 仿網易雲音樂項目

時間 2020-09-07

標籤 vue desktop nicemusic 開發網易音樂項目简体版

原文原文鏈接

特別鳴謝

感想Binaryify提供的apicss

嗯，有人嗎？

好久之前就很想作一個音樂類型的網站，有作過移動端，小程序端，基本中途放棄，想着最近有時間就想着作了一個功能比較完整的項目.vue

項目使用VUE
UI框架是ElementUl
css預處理使用的stylus
自定義圖標iconfont

gitee地址：vue-desktop-nicemusic
線上地址：http://nicenav.cn/desktop-musicnode

項目截圖

登陸頁

首頁

我的中心

歌單播放

目錄說明

# | --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進行歌詞解碼ios

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中播放模式，單曲，循環，隨機git

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

切換按鈕
<i class="iconfont" :class="modeIcon" @click="changeMode"></i>
computed處理切換以後的圖標github

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

切換播放模式方法vue-router

// 切換播放模式
    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組件axios

<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
    },