奇妙音樂屋!一個基於Vue3高仿網易雲PC端的音樂流媒體網站

Java陈序员發表於2024-07-11

大家好,我是 Java陳序員

今天,給大家安利一個高仿網易雲 PC 端的開源專案,介面精美、功能豐富!

關注微信公眾號:【Java陳序員】,獲取開源專案分享、AI副業分享、超200本經典計算機電子書籍等。

專案介紹

vue3-cloud-music —— 一個主要基於 Vue3 + TypeScript + Vite 構建的高仿網易雲 PC 端的音樂流媒體網站。

功能特色:

  • 相容夜間模式,骨架屏載入顯示
  • 基於圖片主色混入的 canvas 漸變背景
  • 歌曲支援隨機、順序、單曲迴圈播放
  • 自定義封裝歌曲進度條,可點選拖拽切換到指定播放時間,新增 buffer 載入進度顯示
  • 歌詞自動同步滾動高亮,滾動選擇歌詞切換播放時間
  • 歌詞底部頭部基於當前所在滾動位置背景色新增虛化漸變遮罩
  • 歌曲播放或暫停時 CD 旋轉或停止旋轉
  • 支援歌單內部搜尋歌曲、收藏歌單、編輯歌單、新建歌單
  • 搜尋歌曲或歌單,提供搜尋建議、搜尋歷史記錄快取
  • 支援掃碼登入、編輯使用者資訊、簽到、退出登入
  • 支援新增喜歡的音樂,獲取我建立的歌單和收藏的歌單
  • 記憶當前滾動位置,重新整理頁面時更新滾動位置
  • MV 列表,支援播放 MV
  • 評論列表,支援點選評論、回覆評論、新增評論、發表評論

技術棧:

  • Vue3
  • Vite
  • Pinia
  • Naive UI
  • tailwindcss
  • xgplayer

專案截圖

專案執行

推薦 Node 版本 14.18+/16+,推薦使用 pnpm 安裝依賴!

1、拉取程式碼

git clone https://github.com/path-yu/vue3-cloud-music.git

2、安裝依賴

pnpm install

3、執行

pnpm run dev

4、構建

pnpm run build
專案地址:https://github.com/path-yu/vue3-cloud-music
線上體驗:https://cloud-music-eight-nu.vercel.app/#/discovery

最後

推薦的開源專案已經收錄到 GitHub 專案,歡迎 Star

https://github.com/chenyl8848/great-open-source-project

或者訪問網站,進行線上瀏覽:

https://chencoding.top:8090/#/

大家的點贊、收藏和評論都是對作者的支援,如文章對你有幫助還請點贊轉發支援下,謝謝!

相關文章