基于vue3的移动端音乐播放器

最新推荐文章于 2024-08-09 09:32:19 发布
最新推荐文章于 2024-08-09 09:32:19 发布
阅读量2.2k 收藏 21
点赞数 3
分类专栏： 前端 文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46186155/article/details/124540582
版权
这是一个基于Vue3的移动端音乐应用，实现了歌单、搜索和播放功能，采用rem布局确保跨设备兼容性。项目亮点包括动态歌词显示、骨架屏优化加载体验，以及使用Vue3的Composition API编写代码。还应用了搜索结果本地缓存和防抖技术，减少网络请求。项目持续更新中，欢迎star。
摘要由CSDN通过智能技术生成

项目介绍

这是一个基于vue3的移动端音乐项目，具有歌单、音乐搜索、音乐播放、登录等功能，后期会更新完善功能。

它具有以下不错的地方：
1. 使用rem布局来应对不同设备，保证设备之间的兼容性。
2. 具有比较完善的功能（后续会继续更新），歌单、音乐的搜索及播放，登录功能，路由拦截。
3. 歌词会随着音乐的播放动态变化。
4. 排行榜请求数据较多，增加了骨架屏来缓解白屏现象。
5. 使用最新的vue3 Componsition API 风格来编写代码，使组件之间的逻辑更加内聚。

项目内容

  1. 首页
    在这里插入图片描述
  2. 歌曲播放页
    在这里插入图片描述
    在这里插入图片描述
  3. 歌单详情页
    在这里插入图片描述
  4. 搜索页
  • 增加本地缓存，缓存搜索过的歌曲。
  • 同时为搜索增加防抖函数&
最低0.47元/天 解锁文章
向歌啊
关注
专栏目录
架构演进
weixin_49349430的博客
12-21 522
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MA76HJ0o-1608560174392)(Pictures/1589079298185.png)] Author：Eric Version：9.0.0 文章目录一、开发环境&生产环境1.1 开发环境1.2 生产环境二、Web1.0&Web2.0阶段2.1 Web1.0阶段2.2 Web2.0阶段2.3 搭建集群后发生的问题.三、垂直架构四、分布式架构五、分布式架构常见问题5.1 服务之间的异步通讯5.2
基于Vue20的移动端音乐播放器
08-11
基于Vue2.0的移动端音乐播放器，QQ音乐API，可听QQ高品质歌曲
VUE3开箱即用的音频播放组件（基于原生audio）
最新发布
cute_ming的博客
08-09 981
注：我是使用unocss语法来编写css 如果项目没有搭载unocss 将其相应的转换为css即可。
vue音乐播放器app
云
10-04 300
vue init webpack vue-music 项目构建卡顿的话，使用git bash打开，如果构建成功，npm start项目启动失败的话，删除node_modules文件夹，重新npm install dependencies（ fastclick 、babel-polyfill 、 babel-runtime） fastclick ：解决移动端300ms延迟的问题 /...
一款基于Vue的自适应Web在线音乐播放器
404源码社区 - Admin404
01-15 566
说明：一两年前博主曾分享过一个美观的在线音乐播放器MKOnlineMusicPlayer，不过作者早已停止了维护，最近有小伙伴推荐了mmPlayer，一个使用Vue全家桶打造自适应Web音乐播放器，模仿QQ⾳乐⽹页版界⾯，主要以为PC端为主，移动端只做相应适配(未做歌词显⽰)，现已实现播放器、歌词滚动、排⾏榜、搜索、播放历史、同步⽹易云歌单六⼤功能。 截图 功能 播放器 快捷键操作 歌词滚动 正在播放 排行榜 歌单详情 搜索 播放历史 查看评论 同步网易云歌单 安装 Githu
基于vue全家桶开发的一款移动端音乐播放器webapp
08-12
基于vue全家桶开发的一款移动端音乐播放器webapp
vue3+node.js实现移动端音乐播放器
07-03
【标题】"vue3+node.js实现移动端音乐播放器"是一个综合性的项目，结合了前端Vue3框架和后端Node.js技术，旨在构建一个适用于移动设备的音乐播放应用。Vue3是Vue.js的最新版本，提供了更高效、更灵活的组件系统和...
音乐app移动端第一天(使用vuecli3开发)
01-20
在pulibc文件夹下的index.html中配置移动端常见配置 在main.js中引入babel-...在App.vue中使用m-heaqder 此处引入MHeader时设置了alias别名 配置哈希路由 封装axios请求 封装jsonp请求 作者：一个吟游诗人
Vue移动端项目中音乐播放器
Ywm103025的博客
12-24 946
思路解析： 1,先写dom层结构 2，css样式 3，js逻辑 （1）先通过选择器获取audio标签 （2）监听play与pause （3）进入页面之前，图片不旋转，不给图片添加旋转 （4）当点击play播放，通过.classList.remove移除按钮的当前默认状态，使其处于播放状态，通过.classList.add给图片添加旋转 （5）当点击pause按钮，通过.classList.add增...
Vue3音乐播放器组件，可显示歌词
qq_46083602的博客
02-23 1750
vue3音乐播放器组件，歌词滚动
迷你vue音乐播放插件
06-01
迷你音乐播放器由VueJs构建
vue仿移动端音乐播放器
weixin_43807981的博客
09-17 1152
工作之余查了很多资料一步步摸索出来的，先感谢各位大佬。 仿QQ音乐做的，不是100%还原，不过基本原理都在这了，结合之前的歌词滚动组件一起使用 页面布局拆分 总体分为 1顶部歌名+歌手的top-bar模块+模糊背景 2专辑+歌词滚动模块 3进度条+时间模块 4播放控件模块，播放，暂停，上一曲，下一曲。 第一部分 需要定一个固定在页面的div做模糊背景，然后平铺一个APP-bar <template> <div class="main-page" ref="MainRef"&gt
vue3+aplayer 做一个音乐播放器功能
qq_55681529的博客
07-26 1697
父组件中调用：<a-player :data="record" />封装一个aplayer.vue的组件。下载：npm i aplayer。
Vue3+TS手写音乐播放器
admin12345671的博客
03-20 725
最后，播放音乐 audio.play() 自带的api。iconPark字体图标库 npm 下载。四、点击左侧菜单时的样式：router里设置。九、Pinia 状态管理，数据持久化存储。六、axios 封装 .ts。十、点击播放，暂停按钮，切换状态。七、发送请求 api.ts。五、轮播图 swiper。index.vue初始化。二、循环遍历左侧菜单列表。点击轮播图片发送请求。八、点击轮播，音乐播放。
Vue3自定义封装音频播放组件（带拖拽进度条）
weixin_48215380的博客
05-10 934
该款自定义组件可作为音频、视频播放的进度条，用于控制音频、视频的播放进度、暂停开始、拖拽进度条拓展性极高。
vue移动端音乐----播放器组件的开发
qq_22317389的博客
07-29 2235
多个组件都可以打开播放器，所以我们要控制这个播放器的数据，一定是全局的，所以我们把数据通过vuex来管理  1.  Vuex数据设计，很多歌单都可以打开播放器，打开歌单缩小时，会出页面最下方出现小型的播放器，所以播放器的数据一定是全局的，所以把这个数据通过vuex来管理 在state.js中添加播放器的状态，并在common-&gt;config.js中添加播放器的播放模式（顺序，随机，循环） ...
基于Vue实现音乐APP项目资料分享
我的博客
08-28 1313
综述：挺好的资料，分享下共同提高 1、从浏览器多进程到JS单线程，JS运行机制最全面的一次梳理：https://juejin.im/post/5a6547d0f265da3e283a1df71.26 2、Front-end-Web-Development-Interview-Question：https://github.com/paddingme/Front-end-Web-Develo...
基于vue3的音乐播放器应用研究背景与意义
05-13
随着互联网技术的不断发展，音乐在我们日常生活中扮演着越来越重要的角色。现在，人们可以通过各种方式轻松地获取和享受音乐，如在线音乐平台、音乐APP等。而随着移动互联网的普及，人们更加习惯于使用智能手机来进行音乐播放。 因此，基于vue3的音乐播放器应用的研究意义在于，开发出一款具有高效、易用、可扩展性的音乐播放器应用，可以为用户带来更好的音乐体验，满足用户个性化的需求。 同时，基于vue3的音乐播放器应用还可以为开发者提供一个优秀的学习案例，帮助他们更深入地了解Vue技术栈的应用和实现。此外，该应用还可以为开发者提供一个开发框架和组件库的基础，方便他们在以后的项目中进行复用和优化。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值