600字范文 > vue3 + TypeScript + vant +pinia 实现网易云音乐播放器

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

时间：2024-04-16 14:55:11

实现功能

每日推荐私人FM歌单广场排行榜歌手歌曲播放mv播放上下滑动切换云盘上传用户登录歌单创建搜索最近播放其他后续更新中

项目结构

先看看效果

播放器页面歌词滚动

夜间模式

使用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 = 0lyric = 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 } = lyricactiveIndex.value = lineNumif (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中设置的baseURLchangeOrigin: true, // 如果接口跨域，需要进行这个参数配置//ws: true, // proxy websockets//pathRewrite方法重写urlpathRewrite: {'^/api': '/'}}}}

api接口项目地址： /Binaryify/NeteaseCloudMusicApi