前言:以下内容均为学习慕课网高级实战课程的实践爬坑笔记。项目github地址:https://github.com/66Web/ljq_vue_music,欢迎Star。歌曲列表歌曲播放一、子路由配置以及转场动画实现components->singer-detail目录下:创建singer-detai.vueroute->index.js中:引入并配置Singer子路由SingerDe
转载
2024-05-16 17:19:13
64阅读
今天,我们接着上一节继续向下进行,完成当用户点击自己想听的排行榜时,显示的界面 ,该界面要讲解的知识点较多。文件位置:src\components\RankPage.vue ,效果图: 讲解重点:1、由 Rank.vue 页面传来的 排行榜id
转载
2023-11-17 12:54:33
76阅读
vue vue-router vuex vue/cli typescript 高仿网易云音乐实现代码全方位解析前言: vue全家桶 + TypeScript 构建一款移动端音乐webApp 项目的笔记项目源码地址 (https://github.com/lang1427/vue-typescript-music)涉及功
转载
2024-06-07 07:46:42
323阅读
做音乐播放器,界面一定要炫酷。太low了听歌没感觉。本身是为了在上班的时候用,于是做成了一个类似网易云音乐的界面,大小合适。不用兼容手机端。用css做图标本怀着简单实用的需求去考虑,图标可用SVG、url或者css。相对于url,SVG和css更好一些。为了修炼,最终选择的css。利用好after和before,能减少很多dom嵌套。.next {
position: re
转载
2023-12-01 15:41:28
105阅读
Vue-mmPlayer:一款高效易用的Vue音乐播放器组件项目地址:https://gitcode.com/maomao1996/Vue-mmPlayerVue-mmPlayer 是一个基于Vue.js开发的轻量级音乐播放器组件,专为Web开发者设计,旨在帮助他们轻松地在项目中集成音乐播放功能。该项目以简洁、灵活和高度可定制性为核心,提供丰富的API和事件,使得在各种应用场景中都能游刃有余。技术
转载
2024-08-09 10:49:49
229阅读
基于 Vue(2.5) + vuex + vue-router + vue-axios +better-scroll + Scss + ES6 等开发一款移动端音乐 WebApp,UI 界面参考了安卓版的网易云音乐、flex 布局适配常见移动端。 因为服务器的原因,所以可能多人访问的时候有些东西会加
转载
2020-04-29 11:59:00
376阅读
2评论
# Spring Boot + Vue 音乐项目实战指南
在这篇文章中,我将引导你完成一个简单的音乐项目,利用 Spring Boot 作为后端服务和 Vue.js 作为前端框架。我们会遵循以下步骤:[项目初始化、后端开发、前端开发、集成测试、部署]。
## 步骤流程
| 步骤 | 描述 |
|-
原创
2024-09-02 03:18:08
101阅读
注意这个不是vue-cli创建的项目 是一个引用vue.js写的html文件 ,直接粘到一个html文件,然后引入vue.js就能用了,我的音乐链接隔一段时间会失效,需要自己准备音乐 有拖动和点击切换播放进度的功能
demo图片
代码
<!DOCTYPE html>
<html lang="en">
<he
一.安装依赖yarn add vue-aplayer or`npm i vue-aplayer二.使用
原创
2021-06-03 20:09:34
1335阅读
今天,我们来实现播放器首页的 排行榜页面 的开发,也就是 src\components\Rank.vue ,效果截图: 主要分析要点:1、Vuex模块化2、CSS屏幕自适应——@media screen3、overflow CSS处理文本溢出4、absolute 绝对定位 页面的图片、排行榜名称、歌曲等信息,来自QQ音乐的数据接口,我们用 vue-resource
转载
2024-03-28 15:45:36
200阅读
效果 实现Vue Router 官方文档https://router.vuejs.org/zh/guide/用 Vue.js + Vue Router
原创
2023-05-16 22:18:00
108阅读
在 webpack.dev.config.js中 在请求金封装的接口中
原创
2022-04-21 14:07:49
479阅读
掘金上面已经有很多播放器的实现了。这次造轮子主要是刻意练习吧,主要根据ustbhuangyi.com/music/的UI和流程实现。稍微查了下这个对应网课价格是399。。。目前只是粗略实现了主要的UI部分,数据部分都是本地的Mock数据。具体源码请戳github。技术栈使用了vue2.x, typescript, vue-router, swiper,better-scroll。vue2.x: M
转载
2021-01-28 20:36:59
1306阅读
2评论
1 首先建一个文件夹 放几首歌曲 2 看代码 1)基本版本 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>音乐播放器</title> <meta name="viewport" content="wi
原创
2021-07-30 11:38:40
390阅读
vue自定义音乐播放器(neteast-music-vue)A mobile first, handwritten, responsive web app for music fans. 面向音乐迷的移动优先,手写响应式网络应用程序。
View Demo
查看演示
Download Source
下载源
It is a mobile first respons
日常训练
原创
2021-07-21 09:39:52
437阅读
效果图: html页面: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> ...
转载
2021-07-21 21:13:00
924阅读
2评论
说明:
用vue,将name.mp3这段录音文件,添加背景音乐,bg.mp3,然后生成新的文件
提前准备好两个mp3文件,一个录音文件,一个背景音乐,放在public目录里
step1:下载依赖
{
"name": "untitled3",
"private": true,
"version": "
用vue,将name.mp3这段录音文件,添加背景音乐,bg.mp3,然后生成新的文件。提前准备好两个mp3文件,一个录音文件,一个背景音乐,放在public目录里。step1:下载依赖。