Skip to content

mllt992/music-web

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

27 Commits
.vscode
.vscode
ย 
ย 
api/webdav-proxy
api/webdav-proxy
ย 
ย 
public
public
ย 
ย 
src
src
ย 
ย 
.gitignore
.gitignore
ย 
ย 
README.md
README.md
ย 
ย 
index.html
index.html
ย 
ย 
package-lock.json
package-lock.json
ย 
ย 
package.json
package.json
ย 
ย 
tsconfig.app.json
tsconfig.app.json
ย 
ย 
tsconfig.json
tsconfig.json
ย 
ย 
tsconfig.node.json
tsconfig.node.json
ย 
ย 
vercel.json
vercel.json
ย 
ย 
vite.config.ts
vite.config.ts
ย 
ย 

Repository files navigation

๐ŸŽต Music Web - ็ŽฐไปฃๅŒ–้Ÿณไนๆ’ญๆ”พๅ™จ

English | ไธญๆ–‡

ไธ€ไธชๅŸบไบŽ Vue 3 + TypeScript ๆž„ๅปบ็š„็ŽฐไปฃๅŒ–้Ÿณไนๆ’ญๆ”พๅ™จ๏ผŒๆ”ฏๆŒๅคšๅนณๅฐ้Ÿณไนๆœ็ดขๅ’Œๆ’ญๆ”พ๏ผŒๆไพ›ไผ˜้›…็š„็”จๆˆทไฝ“้ชŒใ€‚

โœจ ๆ ธๅฟƒๅŠŸ่ƒฝ

๐ŸŽง ้Ÿณไนๆ’ญๆ”พ

  • ๅฎŒๆ•ด็š„ๆ’ญๆ”พๆŽงๅˆถ๏ผˆๆ’ญๆ”พ/ๆš‚ๅœ/ไธŠไธ€้ฆ–/ไธ‹ไธ€้ฆ–๏ผ‰
  • ่ฟ›ๅบฆๆกๆŽงๅˆถๅ’Œ้Ÿณ้‡่ฐƒ่Š‚
  • ๅคš็งๆ’ญๆ”พๆจกๅผ๏ผˆ้กบๅบ/ๅ•ๆ›ฒๅพช็Žฏ/ๅˆ—่กจๅพช็Žฏ/้šๆœบ๏ผ‰
  • ่ฟทไฝ ๆ’ญๆ”พๅ™จๅ’Œๅ…จๅฑๆ’ญๆ”พๅ™จ็•Œ้ข
  • ๆ”ฏๆŒๅคš็ง้Ÿณ่ดจ้€‰ๆ‹ฉ๏ผˆ128k/320k/FLAC/FLAC24bit๏ผ‰

๐ŸŽต ๅคšๅนณๅฐๆ”ฏๆŒ

  • ็ฝ‘ๆ˜“ไบ‘้Ÿณไน - ๅฎŒๆ•ดๆ”ฏๆŒ
  • ้…ทๆˆ‘้Ÿณไน - ๆœ็ดขๅ’Œๆ’ญๆ”พ
  • QQ้Ÿณไน - ๆœ็ดขๅ’Œๆ’ญๆ”พ
  • ่šๅˆๆœ็ดข - ๅŒๆ—ถๆœ็ดขๆ‰€ๆœ‰ๅนณๅฐ

๐Ÿ“ฑ ้กต้ขๅŠŸ่ƒฝ

  • ๅ‘็Žฐ - ๆต่งˆๅ„ๅนณๅฐ้Ÿณไนๆฆœๅ•ๅ’ŒๆŽจ่
  • ๆŽ’่กŒๆฆœ - ๅˆ†็ฑป้Ÿณไนๆฆœๅ•ๆต่งˆ
  • ๆœ็ดข - ๅคšๅนณๅฐ่šๅˆๆˆ–ๆŒ‡ๅฎšๅนณๅฐ้Ÿณไนๆœ็ดข
  • ้Ÿณไนๅบ“ - ไธชไบบๆ”ถ่—ใ€ๆ’ญๆ”พๅˆ—่กจๅ’Œๆ’ญๆ”พๅŽ†ๅฒ
  • ๆ’ญๆ”พๅˆ—่กจ - ๅˆ›ๅปบๅ’Œ็ฎก็†่‡ชๅฎšไน‰ๆ’ญๆ”พๅˆ—่กจ
  • ๆ’ญๆ”พๅ™จ - ไธ“ๆณจ็š„้Ÿณไนๆ’ญๆ”พไฝ“้ชŒ
  • ่ฎพ็ฝฎ - API ้…็ฝฎใ€WebDAV ๅŒๆญฅๅ’Œๅๅฅฝ่ฎพ็ฝฎ

๐Ÿ”„ ๆ•ฐๆฎ็ฎก็†

  • ๆ”ถ่—็ฎก็† - ไฟๅญ˜ๅ’Œ็ฎก็†ๅ–œ็ˆฑ็š„ๆญŒๆ›ฒ
  • ๆ’ญๆ”พๅŽ†ๅฒ - ่ฎฐๅฝ•ๆœ€่ฟ‘ๆ’ญๆ”พ็š„ๆญŒๆ›ฒ
  • ่‡ชๅฎšไน‰ๆ’ญๆ”พๅˆ—่กจ - ๅˆ›ๅปบๅ’Œ็ป„็ป‡้Ÿณไน้›†ๅˆ
  • WebDAV ๅŒๆญฅ - ไบ‘ๅค‡ไปฝๅ’Œๅคš่ฎพๅค‡ๅŒๆญฅ
  • ๆœฌๅœฐๅญ˜ๅ‚จ - ไฟๅญ˜็”จๆˆทๅๅฅฝๅ’Œ่ฎพ็ฝฎ

๐Ÿ› ๏ธ ๆŠ€ๆœฏๆ ˆ

ๅ‰็ซฏๆก†ๆžถ

  • Vue 3.5 - ๆธ่ฟ›ๅผ JavaScript ๆก†ๆžถ
  • TypeScript - ๆไพ›็ฑปๅž‹ๅฎ‰ๅ…จ็š„ JavaScript ่ถ…้›†
  • Vite - ไธ‹ไธ€ไปฃๅ‰็ซฏๆž„ๅปบๅทฅๅ…ท

UI ็ป„ไปถๅบ“

  • Naive UI - ็ŽฐไปฃๅŒ–็š„ Vue 3 ็ป„ไปถๅบ“
  • @vueuse/core - Vue ็ป„ๅˆๅผ API ๅทฅๅ…ท้›†
  • vfonts - ๅญ—ไฝ“ๆ”ฏๆŒ

็Šถๆ€็ฎก็†ไธŽ่ทฏ็”ฑ

  • Pinia - Vue 3 ็Šถๆ€็ฎก็†ๅบ“
  • Vue Router - ๅฎ˜ๆ–น่ทฏ็”ฑ็ฎก็†

ๆ•ฐๆฎไบคไบ’

  • Axios - HTTP ๅฎขๆˆท็ซฏ๏ผŒ็”จไบŽ API ้€šไฟก
  • WebDAV - ไบ‘ๅญ˜ๅ‚จๅŒๆญฅๅ่ฎฎ

ๅทฅๅ…ทๅบ“

  • dayjs - ่ฝป้‡็บงๆ—ฅๆœŸๆ—ถ้—ดๅค„็†ๅบ“

๐Ÿš€ ๅฟซ้€Ÿๅผ€ๅง‹

็Žฏๅขƒ่ฆๆฑ‚

  • Node.js >= 16.0.0
  • npm ๆˆ– yarn

ๅฎ‰่ฃ…ไพ่ต–

npm install

ๅผ€ๅ‘ๆจกๅผ

npm run dev

ๅบ”็”จๅฐ†ๅœจ http://localhost:5173 ๅฏๅŠจ

ๆž„ๅปบ็”Ÿไบง็‰ˆๆœฌ

npm run build

้ข„่งˆ็”Ÿไบง็‰ˆๆœฌ

npm run preview

๐Ÿ“ ้กน็›ฎ็ป“ๆž„

src/
โ”œโ”€โ”€ api/           # API ๆŽฅๅฃๅฎšไน‰
โ”‚   โ””โ”€โ”€ tunehub.ts # TuneHub API ๅฎขๆˆท็ซฏ
โ”œโ”€โ”€ assets/        # ้™ๆ€่ต„ๆบ
โ”œโ”€โ”€ components/    # ๅ…ฌๅ…ฑ็ป„ไปถ
โ”‚   โ”œโ”€โ”€ PlayerBar.vue      # ๅบ•้ƒจๆ’ญๆ”พๅ™จๆ 
โ”‚   โ”œโ”€โ”€ SettingsApi.vue    # API ่ฎพ็ฝฎ็ป„ไปถ
โ”‚   โ”œโ”€โ”€ SettingsSleep.vue  # ็ก็œ ๅฎšๆ—ถๅ™จ่ฎพ็ฝฎ
โ”‚   โ””โ”€โ”€ SettingsWebdav.vue # WebDAV ่ฎพ็ฝฎ็ป„ไปถ
โ”œโ”€โ”€ lyrics/        # ๆญŒ่ฏ็›ธๅ…ณๅค„็†
โ”œโ”€โ”€ router/        # ่ทฏ็”ฑ้…็ฝฎ
โ”œโ”€โ”€ storage/       # ๆœฌๅœฐๅญ˜ๅ‚จ็ฎก็†
โ”œโ”€โ”€ stores/        # ็Šถๆ€็ฎก็†
โ”‚   โ”œโ”€โ”€ app.ts     # ๅบ”็”จ็Šถๆ€
โ”‚   โ””โ”€โ”€ player.ts  # ๆ’ญๆ”พๅ™จ็Šถๆ€
โ”œโ”€โ”€ views/         # ้กต้ข็ป„ไปถ
โ”‚   โ”œโ”€โ”€ AppShell.vue     # ๅบ”็”จๅธƒๅฑ€ๅค–ๅฃณ
โ”‚   โ”œโ”€โ”€ DiscoverView.vue # ๅ‘็Žฐ้กต้ข
โ”‚   โ”œโ”€โ”€ LibraryView.vue  # ้Ÿณไนๅบ“้กต้ข
โ”‚   โ”œโ”€โ”€ PlayerView.vue   # ๆ’ญๆ”พๅ™จ้กต้ข
โ”‚   โ”œโ”€โ”€ PlaylistView.vue # ๆ’ญๆ”พๅˆ—่กจ้กต้ข
โ”‚   โ”œโ”€โ”€ SearchView.vue   # ๆœ็ดข้กต้ข
โ”‚   โ”œโ”€โ”€ SettingsView.vue # ่ฎพ็ฝฎ้กต้ข
โ”‚   โ””โ”€โ”€ ToplistView.vue  # ๆŽ’่กŒๆฆœ้กต้ข
โ”œโ”€โ”€ webdav/        # WebDAV ๅŒๆญฅๅŠŸ่ƒฝ
โ”œโ”€โ”€ App.vue        # ๆ น็ป„ไปถ
โ”œโ”€โ”€ main.ts        # ๅบ”็”จๅ…ฅๅฃ
โ””โ”€โ”€ style.css      # ๅ…จๅฑ€ๆ ทๅผ

โš™๏ธ ้…็ฝฎ่ฏดๆ˜Ž

API ้…็ฝฎ

ๅบ”็”จ้ป˜่ฎคไฝฟ็”จ TuneHub API ่Žทๅ–้Ÿณไนๆ•ฐๆฎ๏ผŒ้ป˜่ฎค API ๅœฐๅ€ไธบ๏ผš

https://music-dl.sayqz.com

ไฝ ๅฏไปฅๅœจ่ฎพ็ฝฎ้กต้ขไธญไฟฎๆ”น API ๅœฐๅ€๏ผŒไปฅไฝฟ็”จ่‡ชๅฎšไน‰็š„ TuneHub API ๆœๅŠกใ€‚

WebDAV ๅŒๆญฅ

ๅœจ่ฎพ็ฝฎ้กต้ขไธญ๏ผŒไฝ ๅฏไปฅ้…็ฝฎ WebDAV ๆœๅŠกๅ™จไฟกๆฏ๏ผŒๅฎž็Žฐๆ”ถ่—ใ€ๆ’ญๆ”พๅˆ—่กจๅ’Œ่ฎพ็ฝฎ็š„ไบ‘ๅŒๆญฅใ€‚

้Ÿณ่ดจ่ฎพ็ฝฎ

ๆ”ฏๆŒๅคš็ง้Ÿณ่ดจ้€‰ๆ‹ฉ๏ผŒๅŒ…ๆ‹ฌ๏ผš

  • 128k - ๆ ‡ๅ‡†้Ÿณ่ดจ
  • 320k - ้ซ˜่ดจ้‡
  • flac - ๆ— ๆŸ้Ÿณ่ดจ
  • flac24bit - 24ไฝๆ— ๆŸ้Ÿณ่ดจ

๐ŸŽจ UI ่ฎพ่ฎก

  • ไธป้ข˜่‰ฒ๏ผš#6366f1๏ผˆ้›่“่‰ฒ๏ผ‰
  • ็ŽฐไปฃๅŒ–่ฎพ่ฎก๏ผš้‡‡็”จ็Žป็’ƒๆ‹Ÿๆ€๏ผˆGlassmorphism๏ผ‰่ฎพ่ฎก้ฃŽๆ ผ
  • ๅ“ๅบ”ๅผๅธƒๅฑ€๏ผš้€‚้…ไธๅŒๅฑๅน•ๅฐบๅฏธ
  • ๆต็•…ๅŠจ็”ป๏ผšๅนณๆป‘็š„่ฟ‡ๆธกๆ•ˆๆžœๅ’Œไบคไบ’ๅŠจ็”ป
  • ๆทฑ่‰ฒๆจกๅผ๏ผšๆ”ฏๆŒๆทฑ่‰ฒไธป้ข˜ๅˆ‡ๆข

๐Ÿ“ ๅผ€ๅ‘ๆŒ‡ๅ—

็ป„ไปถๅผ€ๅ‘

  • ไฝฟ็”จ Vue 3 Composition API
  • ไธฅๆ ผ็š„ TypeScript ็ฑปๅž‹็บฆๆŸ
  • ๅ•ๆ–‡ไปถ็ป„ไปถ๏ผˆSFC๏ผ‰ๆ ผๅผ

็Šถๆ€็ฎก็†

  • ไฝฟ็”จ Pinia ่ฟ›่กŒ็Šถๆ€็ฎก็†
  • ๆจกๅ—ๅŒ–็š„ store ่ฎพ่ฎก
  • ๆ”ฏๆŒ DevTools ่ฐƒ่ฏ•

ๆ ทๅผ่ง„่Œƒ

  • ไฝฟ็”จ CSS ๅ˜้‡่ฟ›่กŒไธป้ข˜ๅฎšๅˆถ
  • ็ป„ไปถ็บงๆ ทๅผ้š”็ฆป
  • ๅ“ๅบ”ๅผ่ฎพ่ฎกๅŽŸๅˆ™

๐Ÿš€ ้ƒจ็ฝฒ

ๆž„ๅปบไผ˜ๅŒ–

npm run build

ๆž„ๅปบไบง็‰ฉไฝไบŽ dist/ ็›ฎๅฝ•๏ผŒๅฏ็›ดๆŽฅ้ƒจ็ฝฒๅˆฐ้™ๆ€ๆ‰˜็ฎกๆœๅŠกใ€‚

ๆŽจ่้ƒจ็ฝฒๅนณๅฐ

  • Vercel
  • Netlify
  • GitHub Pages
  • ้˜ฟ้‡Œไบ‘ OSS
  • ่…พ่ฎฏไบ‘ COS

๐Ÿค ่ดก็Œฎ

ๆฌข่ฟŽๆไบค Issue ๅ’Œ Pull Request ๆฅๆ”น่ฟ›้กน็›ฎใ€‚

๐Ÿ“„ ่ฎธๅฏ่ฏ

ๆœฌ้กน็›ฎ้‡‡็”จ MIT ่ฎธๅฏ่ฏใ€‚

๐ŸŽฏ ๆœชๆฅ่ฎกๅˆ’

  • ๆญŒ่ฏๅฎžๆ—ถๅŒๆญฅๆ˜พ็คบ
  • ๆ›ดๅคš้Ÿณไนๅนณๅฐๆ”ฏๆŒ
  • ้Ÿณ้ข‘ๅฏ่ง†ๅŒ–ๆ•ˆๆžœ
  • ็ฆป็บฟๆจกๅผๆ”ฏๆŒ
  • ไธป้ข˜่‡ชๅฎšไน‰
  • ็คพไบคๅˆ†ไบซๅŠŸ่ƒฝ
  • ๆ’ญๅฎขๆ”ฏๆŒ
  • ็”ตๅฐๆจกๅผ

ไบซๅ—ไฝ ็š„้Ÿณไนไน‹ๆ—…๏ผ๐ŸŽต

๐ŸŽต Music Web - Modern Music Player

ไธญๆ–‡ | English

A modern music player built with Vue 3 + TypeScript, supporting multi-platform music search and playback with an elegant user experience.

โœจ Core Features

๐ŸŽง Music Playback

  • Complete playback controls (play/pause/previous/next)
  • Progress bar control and volume adjustment
  • Multiple playback modes (sequential/single loop/list loop/shuffle)
  • Mini player and full-screen player interfaces
  • Support for multiple audio qualities (128k/320k/FLAC/FLAC24bit)

๐ŸŽต Multi-platform Support

  • NetEase Cloud Music - Full support
  • Kuwo Music - Search and playback
  • QQ Music - Search and playback
  • Aggregate Search - Search across all platforms simultaneously

๐Ÿ“ฑ Page Features

  • Discover - Browse music charts and recommendations from various platforms
  • Toplist - Categorized music charts browsing
  • Search - Multi-platform aggregate or specific platform music search
  • Library - Personal favorites, playlists, and play history
  • Playlist - Create and manage custom playlists
  • Player - Focused music playback experience
  • Settings - API configuration, WebDAV sync, and preferences

๐Ÿ”„ Data Management

  • Favorites Collection - Save and manage favorite songs
  • Play History - Record recently played songs
  • Custom Playlists - Create and organize music collections
  • WebDAV Sync - Cloud backup and multi-device synchronization
  • Local Storage - Save user preferences and settings

๐Ÿ› ๏ธ Tech Stack

Frontend Framework

  • Vue 3.5 - Progressive JavaScript framework
  • TypeScript - Type-safe JavaScript superset
  • Vite - Next-generation frontend build tool

UI Component Library

  • Naive UI - Modern Vue 3 component library
  • @vueuse/core - Vue Composition API utilities
  • vfonts - Font support

State Management & Routing

  • Pinia - Vue 3 state management library
  • Vue Router - Official routing management

Data Interaction

  • Axios - HTTP client for API communication
  • WebDAV - Cloud storage synchronization protocol

Utility Libraries

  • dayjs - Lightweight date-time processing library

๐Ÿš€ Quick Start

Prerequisites

  • Node.js >= 16.0.0
  • npm or yarn

Install Dependencies

npm install

Development Mode

npm run dev

The app will start at http://localhost:5173

Build for Production

npm run build

Preview Production Build

npm run preview

๐Ÿ“ Project Structure

src/
โ”œโ”€โ”€ api/           # API interface definitions
โ”‚   โ””โ”€โ”€ tunehub.ts # TuneHub API client
โ”œโ”€โ”€ assets/        # Static assets
โ”œโ”€โ”€ components/    # Common components
โ”‚   โ”œโ”€โ”€ PlayerBar.vue      # Bottom player bar
โ”‚   โ”œโ”€โ”€ SettingsApi.vue    # API settings component
โ”‚   โ”œโ”€โ”€ SettingsSleep.vue  # Sleep timer settings
โ”‚   โ””โ”€โ”€ SettingsWebdav.vue # WebDAV settings component
โ”œโ”€โ”€ lyrics/        # Lyrics processing
โ”œโ”€โ”€ router/        # Router configuration
โ”œโ”€โ”€ storage/       # Local storage management
โ”œโ”€โ”€ stores/        # State management
โ”‚   โ”œโ”€โ”€ app.ts     # Application state
โ”‚   โ””โ”€โ”€ player.ts  # Player state
โ”œโ”€โ”€ views/         # Page components
โ”‚   โ”œโ”€โ”€ AppShell.vue     # Application layout shell
โ”‚   โ”œโ”€โ”€ DiscoverView.vue # Discover page
โ”‚   โ”œโ”€โ”€ LibraryView.vue  # Library page
โ”‚   โ”œโ”€โ”€ PlayerView.vue   # Player page
โ”‚   โ”œโ”€โ”€ PlaylistView.vue # Playlist page
โ”‚   โ”œโ”€โ”€ SearchView.vue   # Search page
โ”‚   โ”œโ”€โ”€ SettingsView.vue # Settings page
โ”‚   โ””โ”€โ”€ ToplistView.vue  # Toplist page
โ”œโ”€โ”€ webdav/        # WebDAV synchronization functionality
โ”œโ”€โ”€ App.vue        # Root component
โ”œโ”€โ”€ main.ts        # Application entry
โ””โ”€โ”€ style.css      # Global styles

โš™๏ธ Configuration

API Configuration

The app uses TuneHub API to fetch music data by default. The default API address is:

https://music-dl.sayqz.com

You can modify the API address in the settings page to use a custom TuneHub API service.

WebDAV Sync

In the settings page, you can configure WebDAV server information to enable cloud synchronization of favorites, playlists, and settings.

Audio Quality Settings

Supports multiple audio quality options:

  • 128k - Standard quality
  • 320k - High quality
  • flac - Lossless quality
  • flac24bit - 24-bit lossless quality

๐ŸŽจ UI Design

  • Theme Color: #6366f1 (Indigo)
  • Modern Design: Adopts Glassmorphism design style
  • Responsive Layout: Adapts to different screen sizes
  • Smooth Animations: Fluid transition effects and interactive animations
  • Dark Mode: Supports dark theme switching

๐Ÿ“ Development Guidelines

Component Development

  • Use Vue 3 Composition API
  • Strict TypeScript type constraints
  • Single File Component (SFC) format

State Management

  • Use Pinia for state management
  • Modular store design
  • DevTools debugging support

Style Guidelines

  • Use CSS variables for theme customization
  • Component-level style isolation
  • Responsive design principles

๐Ÿš€ Deployment

Build Optimization

npm run build

Build artifacts are located in the dist/ directory and can be directly deployed to static hosting services.

Recommended Deployment Platforms

  • Vercel
  • Netlify
  • GitHub Pages
  • Alibaba Cloud OSS
  • Tencent Cloud COS

๐Ÿค Contributing

Issues and Pull Requests are welcome to improve the project.

๐Ÿ“„ License

This project is licensed under the MIT License.

๐ŸŽฏ Future Plans

  • Real-time lyrics synchronization
  • Support for more music platforms
  • Audio visualization effects
  • Offline mode support
  • Theme customization
  • Social sharing features
  • Podcast support
  • Radio mode

Enjoy Your Music Journey! ๐ŸŽต

About

a web music

music-wow.vercel.app

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages