用vue 做一个音乐播放器
创始人
2025-05-28 06:51:12

xz-music 音乐播放器（web移动端）

开源协议MIT License

github: https://github.com/huangweizhi/xz-music.git

gitee: https://gitee.com/weizhihuang/xz-music.git

页面展示

API接口

使用了开源的网易云音乐 NodeJS 版 API

安装及运行

# 安装依赖项
$ npm install# 开发环境运行
$ npm run dev# 生产环境打包
$ npm run build

默认配置

  • base: './',

  • 开发环境下，VITE_APP_BASE_API: '/xz-music-dev-api' , 代理到 'http://localhost:3000'

  • 生产环境下，VITE_APP_BASE_API: '/xz-music-prod-api'

技术栈

  • vue全家桶 vite + vue3 + vue-router4 +pinia2

  • ui库 vant

  • css预处理 less

  • ajax请求 axios

  • 滚动优化 better-scroll

功能

  • 音乐播放

  • 歌词滚动

  • 播放列表

  • 播放进度（上一首、下一首、暂停、进度条）

  • 音乐MV

  • 音乐评论

  • 喜欢音乐

  • 排行榜

  • 分类

  • 歌单详情

  • 每日推荐

  • 热门MV

  • 搜索（单曲、歌单、歌手、MV）

  • 热门歌手

  • 推荐歌单

  • 推荐新音乐

  • 二维码登录

  • 我的喜欢

  • 创建歌单

  • 收藏歌单

词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

上一篇：深圳机票预订（深圳机票预订电话号码是多少） 深圳机票预订 深圳机票预订电话号码

下一篇：vue3 图片懒加载的两种方式、IntersectionObserver和useIntersectionObserver

相关内容

热门资讯

联动云租一天多少钱（联动云租一... 本篇文章极速百科给大家谈谈联动云租一天多少钱，以及联动云租一天怎么划算对应的知识点，希望对各位有所帮...
飞机托运收费（飞机托运收费多少... 本篇文章极速百科给大家谈谈飞机托运收费，以及飞机托运收费多少钱一公斤对应的知识点，希望对各位有所帮助...
挡泥板（挡泥板是什么意思） 挡... 本篇文章极速百科给大家谈谈挡泥板，以及挡泥板是什么意思对应的知识点，希望对各位有所帮助，不要忘了收藏...
滴滴专车官网（滴滴专车司机网站... 今天给各位分享滴滴专车官网的知识，其中也会对滴滴专车司机网站进行解释，如果能碰巧解决你现在面临的问题...
路特斯跑车（路特斯跑车多少钱一... 今天给各位分享路特斯跑车的知识，其中也会对路特斯跑车多少钱一辆2023款进行解释，如果能碰巧解决你现...
丰田致享新车报价（丰田致享20... 今天给各位分享丰田致享新车报价的知识，其中也会对丰田致享2021款报价进行解释，如果能碰巧解决你现在...
聊城到潍坊的汽车（聊城到潍坊的... 本篇文章极速百科给大家谈谈聊城到潍坊的汽车，以及聊城到潍坊的汽车票价多少对应的知识点，希望对各位有所...
没有身份证怎么买票（没有身份证... 今天给各位分享没有身份证怎么买票的知识，其中也会对没有身份证怎么买票进行解释，如果能碰巧解决你现在面...
2018科目三灯光详细表（20... 本篇文章极速百科给大家谈谈2018科目三灯光详细表，以及2018科目三最新模拟灯光考试20组不重复完...
五菱之光v（五菱之光v和五菱之... 今天给各位分享五菱之光v的知识，其中也会对五菱之光v和五菱之光有什么区别进行解释，如果能碰巧解决你现...
摩托车怠速（摩托车怠速多少转正... 今天给各位分享摩托车怠速的知识，其中也会对摩托车怠速多少转正常进行解释，如果能碰巧解决你现在面临的问...
武汉到西安（武汉到西安火车时刻... 今天给各位分享武汉到西安的知识，其中也会对武汉到西安火车时刻表查询进行解释，如果能碰巧解决你现在面临...
五菱之光v图片（五菱之光v新车... 今天给各位分享五菱之光v图片的知识，其中也会对五菱之光v新车报价进行解释，如果能碰巧解决你现在面临的...
郑州到重庆火车（郑州到重庆火车... 本篇文章极速百科给大家谈谈郑州到重庆火车，以及郑州到重庆火车多少钱一张对应的知识点，希望对各位有所帮...
学生证优惠区间（学生证优惠区间... 今天给各位分享学生证优惠区间的知识，其中也会对学生证优惠区间没有盖章进行解释，如果能碰巧解决你现在面...
武汉到合肥（武汉到合肥多少公里... 今天给各位分享武汉到合肥的知识，其中也会对武汉到合肥多少公里进行解释，如果能碰巧解决你现在面临的问题...
软座座位分布图（k8412软座... 本篇文章极速百科给大家谈谈软座座位分布图，以及k8412软座座位分布图对应的知识点，希望对各位有所帮...
长安逸动dt（长安逸动dt空调... 本篇文章极速百科给大家谈谈长安逸动dt，以及长安逸动dt空调滤芯拆卸教程对应的知识点，希望对各位有所...
西安到达州（西安到达州火车时刻... 本篇文章极速百科给大家谈谈西安到达州，以及西安到达州火车时刻表查询对应的知识点，希望对各位有所帮助，...
野马蝰蛇（野马蝰蛇gt500图... 本篇文章极速百科给大家谈谈野马蝰蛇，以及野马蝰蛇gt500图片对应的知识点，希望对各位有所帮助，不要...
高速obu是什么意思（收费站o... 今天给各位分享高速obu是什么意思的知识，其中也会对收费站obu是什么意思进行解释，如果能碰巧解决你...
西安北站在哪（西安北站在哪进站... 今天给各位分享西安北站在哪的知识，其中也会对西安北站在哪进站进行解释，如果能碰巧解决你现在面临的问题...
汽车搭电一次多少钱（汽车搭电大... 今天给各位分享汽车搭电一次多少钱的知识，其中也会对汽车搭电大概多少钱进行解释，如果能碰巧解决你现在面...
宝马跑车敞篷价格（宝马跑车敞篷... 本篇文章极速百科给大家谈谈宝马跑车敞篷价格，以及宝马跑车敞篷价格图片对应的知识点，希望对各位有所帮助...
cbr650r（cbr650r... 本篇文章极速百科给大家谈谈cbr650r，以及cbr650r座高对应的知识点，希望对各位有所帮助，不...
在哪买机票最便宜（在哪买机票最... 今天给各位分享在哪买机票最便宜的知识，其中也会对在哪买机票最便宜票进行解释，如果能碰巧解决你现在面临...
etc办理点（etc办理点节假... 今天给各位分享etc办理点的知识，其中也会对etc办理点节假日休息吗进行解释，如果能碰巧解决你现在面...
宝马1181报价及图片（宝马1... 今天给各位分享宝马1181报价及图片的知识，其中也会对宝马1181报价及图片及价格进行解释，如果能碰...
限行处罚扣分吗（限行被扣分吗）... 本篇文章极速百科给大家谈谈限行处罚扣分吗，以及限行被扣分吗对应的知识点，希望对各位有所帮助，不要忘了...
车车（车车车念什么） 车车 车... 今天给各位分享车车的知识，其中也会对车车车念什么进行解释，如果能碰巧解决你现在面临的问题，别忘了关注...