vue3 + TypeScript + vant +pinia 实现网易云音乐播放器

vue3 + TypeScript + vant +pinia 实现网易云音乐播放器

实现功能

1. 每日推荐
2. 私人FM
3. 歌单广场
4. 排行榜
5. 歌手
6. 歌曲播放
7. mv播放 上下滑动切换
8. 云盘上传
9. 用户登录
10. 歌单创建
11. 搜索
12. 最近播放
13. 其他后续更新中

项目结构

先看看效果

播放器页面 歌词滚动

夜间模式

使用css变量

export const mode: modeOptions = {
	light: {
		'--my-primary-color': '#e20001',
		'--my-back-color-white': '#fff',
		'--my-back-color-gray': '#f5f5f5',
		'--my-text-color-black': '#333',
		'--my-text-color-white': '#fff',
		'--my-text-color-gray': '#949494',
		'--van-white': '#fff',
		'--van-gray-8': '#323233',
		'--van-blue': '#1989fa',
		'--van-gray-3': '#ebedf0',
		'--my-gray-1': '#e8e8e8',
		'--my-search-back': '#fff',
		'--my-linear-back': 'linear-gradient(#e8e9eb, #fff)',
		'--my-home-menu-back': '#fef1f1',
		'--van-button-default-border-color': '#ebedf0',
		'--van-toast-loading-icon-color': '#fff',
		'--van-toast-text-color': '#fff',
		'--van-active-color': 'var(--van-gray-2)',
		'--my-lyric-color': 'rgba(255,255,255,0.5)',
		'--my-icon-color': '#c4c4c4',
		'--van-slider-button-background-color': 'var(--van-white)',
		'--my-player-text-white': 'white',
		'--my-mask-color': 'rgba(0, 0, 0, 0.6)',
		'--van-nav-bar-icon-color': 'var(--my-text-color-black)',
		'--my-color-oranger': '#ff7a38'
	},
	dark: {
		'--my-primary-color': '#c8c9cc',
		'--my-back-color-white': '#18191b',
		'--my-back-color-gray': '#111214',
		'--my-text-color-black': '#7f8082',
		'--my-text-color-white': '#7f8082',
		'--my-text-color-gray': '#424345',
		'--van-white': '#18191b',
		'--van-gray-8': '#7f8082',
		'--van-nav-bar-text-color': '#7f8082',
		'--van-blue': 'var(--my-text-color-black)',
		'--van-gray-3': '#18191c',
		'--my-gray-1': '#111214',
		'--my-search-back': '#2d3134',
		'--my-linear-back': 'linear-gradient(var(--my-gray-1), var(--van-white))',
		'--my-home-menu-back': '#2c1b1b',
		'--van-button-default-border-color': '#424345',
		'--van-toast-loading-icon-color': '#fff',
		'--van-toast-text-color': '#fff',
		'--van-active-color': '#2d3134',
		'--my-lyric-color': 'rgba(255,255,255,0.5)',
		'--my-icon-color': '#c4c4c4',
		'--van-slider-button-background-color': '#c4c4c4',
		'--my-player-text-white': '#c4c4c4',
		'--my-mask-color': 'rgba(24, 25, 27, 0.5)',
		'--van-nav-bar-icon-color': 'var(--my-text-color-black)',
		'--my-color-oranger': '#ff7a38'
	}
}

关键代码 切换模式时使用js修改css变量

function setStyle(key: string, value: string) :void {
	document.documentElement.style.setProperty(key, value) 
}

歌词滚动

歌词滚动使用插件better-scroll、歌词解析lyric-parser

import Lyric from 'lyric-parser'

// 初始化播放器
function initPlayer(lyricText: string) :void {
	if (lyric) {
		lyric.stop()
		activeIndex.value = 0
		lyric = null
	}
	lyric = new Lyric(lyricText, handler)
	console.log(lyric)
	lyricLines.value = lyric?.lines || []
	if (audio.value) {
		audio.value.volume = 0.1
	}
	lyric?.play()
	audio.value && lyric?.seek(audio.value.currentTime*1000)
}
// handler 函数调用better-scroll的scrollToElemet滚动到当前歌词
function handler(lyric: LineLyric) {
		console.log(lyric)
		const { lineNum, txt } =  lyric
		activeIndex.value = lineNum
		if (activeIndex.value > 5) {
			srcoll.value && srcoll.value.scrollToElemet(document.getElementsByClassName(`lyrcline${ activeIndex.value - 5 }`)[0] as HTMLElement, 1000)
		} else {
			srcoll.value && srcoll.value.scrollToElemet(document.getElementsByClassName(`lyrcline${ 0 }`)[0] as HTMLElement, 1000)
		}
		playerStore.setCurrentText(txt)
	}

项目访问地址

链接: link
访问频繁后网络异常 可以本地启动api接口
自行替换devServer中的target

devServer: {
		open: true,
		hot: true,
		disableHostCheck: true,
		proxy: {
			'/api': {
				target: 'http://101.35.109.105:3006',
				// target: 'http://10.0.9.62:8080', //代理地址，这里设置的地址会代替axios中设置的baseURL
				changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
				//ws: true, // proxy websockets
				//pathRewrite方法重写url
				pathRewrite: {
					'^/api': '/'
				}
			}
		}
	}

api接口项目地址： https://github.com/Binaryify/NeteaseCloudMusicApi

github地址

链接: link https://github.com/lmh199504/v3_ts_music

其他

如有侵权 请联系删除
个人学习vue3项目 喜欢的朋友可以去点一个star