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

实现功能

每日推荐
私人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接口项目地址： https://github.com/Binaryify/NeteaseCloudMusicApi

github地址

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

其他

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

vue3 + TypeScript + vant +pinia 实现网易云音乐播放器相关推荐

树莓派云音乐c语言,基于树莓派的红外遥控版网易云音乐播放器
基于树莓派的红外遥控版网易云音乐播放器.下面是遥控键盘示意图: CH- CH CH+ << >> || - + EQ 0 100+ 200+ 1 2 3 4 5 6 7 8 9 ...
linux树莓派网易云音乐,基于树莓派的红外遥控版网易云音乐播放器
基于树莓派的红外遥控版网易云音乐播放器.下面是遥控键盘示意图: CH- CH CH+ << >> || - + EQ 0 100+ 200+ 1 2 3 4 5 6 7 8 9 ...
HTML+CSS+JAVASCRIPT 高仿低配网页版网易云音乐播放器 1
HTML+CSS+JAVASCRIPT 高仿低配网页版网易云音乐播放器前言没有使用任何框架,只是想用最简单纯js的代码实现下前台: Javascript+jQuery 后台: php/nodej ...
HTML网页调用网易云音乐播放器代码
表现形式一:单曲播放调用代码: <iframe frameborder="no" border="0" marginwidth="0" ...
移动应用开发——uni-app框架仿网易云音乐播放器学习心得
目录一.uni-app框架介绍 1.什么是 uni-app 2.为什么要选择uni-app 3.uni-app 统一规范 4.uni-app功能框架二.开发工具与项目创建 1.开发工具 2.项目创 ...
YesPlayMusic:一个高颜值多音频资源的网易云音乐播放器
都2023年了还有人不知道这款开源免费下载的多音频,高颜值的音乐播放器吗(文末有下载地址) 首先我们来看一下YesPlayMusic的特性和网易云音乐播放器的功能大同小异,少了歌曲评论的功能,这个功 ...
第三方网易云音乐播放器ieaseMusic Mac中文版v1.3.4版
ieasemusic mac中文版是目前mac平台上最好的网易云音乐播放器,与网易云音乐官方客户端最大的区别是,官方的就是「客户端」,完全按照其产品内容进行直接堆砌布局,而 ieaseMusic 是基 ...
小项目：网易云音乐播放器
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...
静态博客网页中的网易云音乐播放器
见我的博客 https://blog.wyue.site/2020/04/12/1/ 转载前请联系我,联系方式请见我博客 https://blog.wyue.site/ 一直想做个博客中的音乐播放器, ...

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

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

实现功能

项目结构

先看看效果

夜间模式

歌词滚动

项目访问地址

github地址

其他

vue3 + TypeScript + vant +pinia 实现网易云音乐播放器相关推荐

最新文章

热门文章