【全栈开发】vue3响应式音乐播放器博客 - 热浪网

置顶 已于 2023-03-25 12:43:15 修改
阅读量1.1k 收藏 7
点赞数 2
分类专栏： vue 文章标签： javascript 前端 vue.js
于 2022-09-12 22:07:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_68324632/article/details/126705406
版权

文章目录

🔥前言

访问网址 →http://www.godsplan.top/apps/allapps
Github → https://github.com/flowers-10/gods_plan

从立项到上线其实已经过了 4个月了，靠着碎片时间开发的一个博客网站，包括购买服务器，网站备案等一整套流程下来，项目耗时曲线也被拉长，不过功夫不负有心人，时间冉冉—

—趁着九月初中秋节这个热浪余波未了，Heat Waves ♨️ 🌊 1.0版本也终于正式上线！！

文章结尾会附上浏览链接

这是一个通过全栈开发的一个极简风响应式多功能音乐播放器+知识博客web （单人役）

后端技术栈:nodejs / express/express-ws
前端技术栈:vue3/typescript/vite/axios/pinia/vue-router/element-plus

UI框架选型来自codepan

展示：

Mobile

请添加图片描述

ipad

请添加图片描述

web

请添加图片描述

一、⭐项目简介

热浪网是一个个人音乐博客，包含了音乐流媒体、发现浏览、app主页、博客浏览学习、聊天交流等功能

包含了 Apps 、Music 、 Discover 、 Knowledge 四大模块

具体页面结构：
请添加图片描述

tips：手机版左上角G图标可以打开侧边栏

二、⭐功能简介

✨1.登录界面

主要使用了网易云音乐的接口进行登录（手机验证码 or 密码登陆）

🤏可拖拽弹框组件： vue自定义拖拽指令 + 封装组件 + 动态插槽 + 表单验证 + vue transiton动画组件

🔐 权限：动态路由 （update页面只有管理员才能进入）+ token + 路由拦截器（例：我的音乐界面需要登录才能访问，如果用户进入此路由会返回登录界面）

web效果

请添加图片描述

🎹2.音乐主页展示

🖱️可根据滚轮滚动切换高亮标题的二级菜单

请添加图片描述

web 效果

请添加图片描述

🕶️3. 主题切换

🕶️ 主题切换：

切换根节点上的 css lightmodel or darkmodel + css 变量var()

🤏封装可拖拽主题切换按钮：

检测用户是移动端还是pc端，移动端会隐藏按钮，自定义拖拽指令，双击切换全局css

web效果
请添加图片描述

切换效果：

mobile效果

💡 light
请添加图片描述
🖤 dark
请添加图片描述

📰 4、文章管理

富文本编辑器 添加图片：通过接口上传到node服务器，再返回url显示

增加文章类型

请添加图片描述

删除选中文章 ： 可多选

请添加图片描述

修改文章：

web效果
请添加图片描述

请添加图片描述

添加文章：

web效果

请添加图片描述
请添加图片描述

⭐5.博客分享和知识学习

跟随滚轮滚动响应的 TOP 按钮
响应式的文章列表

文章列表展示：

mobile效果

请添加图片描述

web效果

请添加图片描述

文章内容：

iapd效果

请添加图片描述

🎶 6.歌单列表详情

mv入口
歌手界面入口
专辑页面
单机歌曲所在的行播放歌曲
播放全部歌曲（50首以内）
持久化处理，保存歌单的id，下次通过侧边栏入口进入时会记忆原id的歌单（默认歌单：猜你喜欢）
封装公共组件 歌曲列表组件 （歌曲列表、歌手最热50首歌曲、播放列表中使用）

ipad效果

在这里插入图片描述

🎶7.播放列表

删除播放列表中的歌曲
刷新歌曲（最多50首， 网易云的防盗链，歌曲url会过期，刷新歌曲后即可听歌）

ipad效果
请添加图片描述

📺8.mv播放

moblie效果

在这里插入图片描述

总结

更多的内容请移步以下链接体验

一个极简风格的音乐博客 点这里“浏览链接”

= -=求求大佬们给我点个赞吧！！！💗💗💗⭐⭐⭐

项目还有许多功能开发完善中~敬请期待（搜索功能、设置、animategril养成等）

顽皮宝
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
第七章 Electron Vue3实现音乐播放器
Etc.End的博客
06-09 3257
一个音乐播放器应该具备播放、暂停、上一首、下一首、播放模式（单曲循环、列表循环、顺序播放……）。除了这些比如还可以扩展进度条的展示、拖拽、音量大小的调节，如果资源允许的话可以进行一些歌词的展示等等。由于博主爬虫的资源没有合适的歌词，所以歌词这块功能暂时没有进行开发，感兴趣的小伙伴可以自行去完善。
Vue3自定义封装音频播放器
前端阿皓
07-31 1207
🚀 本片主要讲解如何使用Vue3去封装一个音频播放器，以及解决在ios微信浏览器中 无法获取音频时长问题。
Vue3音乐播放器组件，可显示歌词
qq_46083602的博客
02-23 701
vue3音乐播放器组件，歌词滚动
vue3播放音频
hello，word！
11-22 1593
使用 autoplay 标签和主动调用 play 方法`document.querySelector('video').play()`都会提示此错误。报错：Error: Uncaught (in promise) DOMException: play() failed。根据 Chrome 的规则，要想使用autoplay自动播放只能加上。在vue3中实测只需点击页面内 程序才能自动调用播放。静音属性就允许自动播放了。
vue3中audio标签自定义播放音频
qdm13209211861的博客
03-30 1785
vue3中循环列表播放音频
vue引入音乐播放器插件
bright的博客
11-07 2647
vue引入音乐播放器插件 npm install @moefe/vue-aplayer main.js引入 import APlayer from '@moefe/vue-aplayer' Vue.use(APlayer, { defaultCover: 'https://github.com/u3u.png', productionTip: true, }); 测试 <aplayer :audio="audio" :lrcType="1" fixed /> data()
基于Vue3和go-gin的全栈开发博客项目源码+项目说明.zip
12-28
基于Vue3和go-gin的全栈开发博客项目源码+项目说明.zip 【技术栈】 后端 Golang 1.19 Gin 1.8.1 (Web框架) GORM 1.23.8 (ORM) MySQL 8 (数据库) 前端 Vue.js 3 Vite 3.1.0 (构建工具) naive-ui / ionicons5 (UI库 /...
Python+Django+vue3全栈开发商城项目.zip
10-05
Python+Django+vue3全栈开发商城项目，包含用户、订单、购物车、商品等模块，后端代码均有注释，是学习python项目开发良好案例
基于Vue3.x和Element UI的网易云音乐PC播放器设计源码
最新发布
04-08
Vue3.x网易云音乐PC播放器 - 基于Vue3和Element UI的PC音乐播放器项目，实现登录、播放、收藏等功能，包含85个文件，包括Vue、JavaScript、HTML、CSS等语言。项目已完成大部分功能，细节和部分功能待优化，欢迎star...
vue-router-nav-呈现vue-router路由的简约响应式导航栏。-Vue.js开发
05-27
vue-router-nav呈现vue-router路由的简约响应式导航栏。 观看演示。 依赖关系您需要拥有vue-router insta vue-router-nav简约的响应式导航栏，用于呈现vue-router的路由。 观看演示。 依赖关系您需要安装vue-router...
2021最新Vue3打造一款音乐播放器 (源码).zip
10-20
2021最新Vue3打造一款音乐播放器 (源码)
vue3 -- 使用audio标签播放音频
King Saj
01-06 3123
vue3 使用audio标签播放音频
vue3 web在线音乐项目——蔚蓝音乐 开发记录
weixin_52878347的博客
08-16 913
想基于vue3技术独立开发一个前端项目，以前做过一个基于vue2和uniapp仿网易云音乐的微信小程序，于是想再做个web版的。前端菜鸡一枚，仅个人记录，项目存在一些布局问题和逻辑bug。只做了我觉得比较核心有趣的几个页面和功能，还有挺多东西可以完善的，等有时间可以慢慢把功能补齐。进度条和歌词滚动还有鼠标拖拽进度条和歌词进度没有实现，歌词滚动还存在一点问题，如果是歌放到一半再打开歌词界面，会从歌词第一句快速滚动到目标位置，不会直接就是正在唱的那句。
Vue3实现简易的音乐播放器组件
cb的博客
05-06 8378
前言 用Vue3实现一个简易的音乐播放器组件 其效果图如下所示： 实现这个组件需要提前做的准备： 引入ElementUI 引入字节跳动图标库 一张唱见图片 将要播放的音乐上传到文件服务器上，并提供一个能在线访问的链接【这里使用的是阿里云的OSS服务】 准备 ElementUI ElementUI的引入可以参照其官网的引入方式； 字节跳动图标库 组件的【上一首】【播放】【下一首】【音量】等图标都是来源自这个图标库，这是其安装文档 在main.js中，我是这样引入的： //引入字节跳动图标库 im
vue3封装-自定义audio音频播放【拖拽进度条,点击进度条，快进，后退，音量加减】思路
kaikai12345677的博客
04-22 7363
vue3封装-自定义audio音频播放【拖拽进度条,点击进度条，快进，后退，音量加减】思路
vue3+aplayer 做一个音乐播放器功能
qq_55681529的博客
07-26 1399
父组件中调用：<a-player :data="record" />封装一个aplayer.vue的组件。下载：npm i aplayer。
Vue3.0项目——打造企业级音乐App（一）Tab栏、轮播图、歌单列表、滚动组件
HuoZhiyan 的博客
08-14 2506
Vue3.0项目——打造企业级音乐App（一）Tab栏实现、轮播图实现、歌单列表实现、滚动组件的封装
Vue3项目自学训练------音乐播放器（使用vueX管理项目）(七)
MX_muxiao的博客
06-26 627
使用vuex管理状态，实现音乐播放器的播放暂停功能
【vue3仿网易云app】歌单播放列表实现
EVELESLIE的博客
03-06 292
点击播放按钮时把当前索引传入setPlayIndex。使用filter:blur 进行背景模糊。使用v-for循环来渲染item。
vue3组合式怎么安转vue-session和vue-cookie并使用
06-06
安装和使用Vue3中的`vue-session`和`vue-cookie`与Vue2中的使用方式类似。具体步骤如下： 1. 安装`vue-session`和`vue-cookie`依赖 ```bash npm install vue-session vue-cookie --save ``` 2. 在Vue3项目中引入`vue-session`和`vue-cookie` ```javascript import { createApp } from 'vue'; import VueSession from 'vue-session'; import VueCookie from 'vue-cookie'; import App from './App.vue'; const app = createApp(App); // 注册vue-session和vue-cookie插件 app.use(VueSession); app.use(VueCookie); app.mount('#app'); ``` 3. 在Vue3组件中使用`vue-session`和`vue-cookie` ```javascript import { onMounted } from 'vue'; import { useSession, useCookie } from 'vue-session'; export default { setup() { const { set, get, remove } = useSession(); const { set: setCookie, get: getCookie, remove: removeCookie } = useCookie(); onMounted(() => { // 设置session set('name', 'John'); // 获取session const name = get('name'); console.log(name); // 'John' // 移除session remove('name'); // 设置cookie setCookie('name', 'John', 1); // 获取cookie const cookieName = getCookie('name'); console.log(cookieName); // 'John' // 移除cookie removeCookie('name'); }); } } ``` 需要注意的是，在Vue3中，由于使用了组合式API，`vue-session`和`vue-cookie`的使用方式略有不同。你需要使用`useSession`和`useCookie`函数来获取`set`、`get`和`remove`等方法，然后在组件中使用它们。 另外，`vue-cookie`中的`set`方法需要传递一个过期时间参数（以天为单位），而不是Vue2中的`expires`属性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值