vue音乐播放器demo，主要是模仿慕课音乐播放器教程制作的一个小demo

最新推荐文章于 2020-07-29 00:00:14 发布
最新推荐文章于 2020-07-29 00:00:14 发布
阅读量667 收藏 4
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42628334/article/details/99350624
版权

``
主要实现的功能有推荐歌单列表，歌手列表，搜索页面，播放器页面，其他功能待开发，播放器部分借鉴慕课一个音乐播放器的开发过程。
数据获取是利用axios和反向代理来完成，在获取歌曲播放地址的时候，由于没有找到正确Vkey的方法，选择了一种超级笨的方法，用每一首歌的mid获取每首的url，在搜索页面还好，都是一首歌，但是在各种歌单列表和歌手歌单列表的时候，一次需要几十个请求，那就爆炸啦，如果有解决办法的同学可以跟我说一下哈哈
给上效果图

在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述
在这里插入图片描述在这里插入图片描述

源码在这里
https://github.com/mokice/vue-demo.git

weixin_42628334
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue demo：播放器
qq_49956121的博客
10-04 91
一、音乐播放器 实例： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <div align="center" style="border: 5px skyblue solid;background-color: skybl
vue音乐播放器
12-26
vue2.x音乐播放器，一个媲美原生的移动端音乐App，项目完整，功能完备，UI美观，交互一。
Vue音乐搜索播放Demo
08-12
Vue 音乐搜索、播放 Demo
Vue音乐播放器入门Demo及Vue环境搭建运行
很杂
05-21 646
Vue音乐播放器入门Demo及Vue环境搭建运行源码DemoGitHubNodeJS安装 源码Demo 毕业后没做嵌入，改做软件开发了。最近在新研究音乐播放器Demo。这个Demo也是从网上乱搜搜出来的，出处找不到了= =。 GitHub Demo:https://github.com/Sioxas/vue-music NodeJS安装 1.下载Windows 安装包(.msi)，并安装 htt...
vue全家桶仿网易云音乐Demo
08-08
技术栈 vue.js vue-router vuex elementUI。是一个不错的 vue 练手项目。
2021最新Vue3打造一款音乐播放器 (源码).zip
10-20
总结来说，这个Vue3音乐播放器项目涵盖了现代前端开发的多个方面，包括Vue3的新特性、前端音频处理、路由管理、样式设计以及项目构建工具的使用，对于想要深入学习Vue3和前端开发的开发者来说，是一个很好的实践案例...
vue一个页面实现音乐播放器的示例
08-28
进度条是音乐播放器的另一个重要部分。作者使用了 range 输入框来设计进度条，使用 CSS 来美化进度条的样式。下面是进度条的设计代码： ``` input[type=range] { -webkit-appearance: none; width: 80%; height:...
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
08-30
* Vue-APlayer 是一个基于 Vue 的音乐播放器插件，提供了灵活的音乐播放功能。 * 使用 Vue-APlayer 需要安装 npminstall vue-aplayer --save，并引入组件 import VueAplayer from 'vue-aplayer'。 * 配置音乐播放器...
基于vue.js制作的mp3音乐播放器
06-11
在这个项目中，我们将深入探讨如何利用Vue.js来构建一个功能完备的MP3音乐播放器。 首先，`index.html`是网页的主入口文件，它定义了页面的基本结构。在这个音乐播放器中，`index.html`将包含播放器的外壳，如...
前端毕业设计大作业基于Electron+Vue构建的桌面音乐播放器源码.zip
06-15
期末大作业基于Electron+Vue构建的桌面音乐播放器源码。 特性 支持音乐频谱 界面友好，支持皮肤切换 跨平台，可打包Windows、Mac、Linux 良好的架构模式和代码风格 提供支持主流的第三方音乐平台 期末大作业基于...
Android动画之音乐播放器效果
10-08
Android动画之音乐播放器效果，欢迎访问我的博客，有文章介绍：http://blog.csdn.net/yayun0516
vue音乐app源代码
02-20
vue+vue-router+vuex+webpack+nodejs （vue音乐app源代码） 此资源必须装node环境才能运行， npm run dev启动项目
黑马程序员Vue深入浅出视频代码
03-31
这是根据黑马程序员中关于Vue11天课程中，跟着视频编写的代码，一行行跟着写出来的，连备注基本也是和视频一样，用的是vscode开发工具，上传的资料已经把node_modules删除了，进入目录后，用cnpm i重新安装一下就可以了，package.json里都有安装清单，http://vue.studyit.io/api这个地址不能用了，已经更换成新的地址
vue实现音乐播放器实战笔记
热门推荐
呐呐呐
05-10 1万+
其他 此应用的全部数据来自 QQ音乐，利用 axios 结合 node.js 代理后端请求抓取 全局通用的应用级状态使用 vuex 集中管理 全局引入 fastclick 库，消除 click 移动浏览器 300ms 延迟 页面是响应式的，适配常见的移动端屏幕，采用 flex 布局 疑难总结 &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp; 小技巧 关于 Vue
用Vue制作的音乐应用
cuk5340的博客
07-29 85
布鲁加音乐 (bruga-music) Music app made with Vue, Vuex and Vue Router. 由Vue，Vuex和Vue Router制作的音乐应用。 View demo 查看演示 Download Source 下载源 构建设置 (Build Setup) # install dependencies npm install # serve wi...
Vue2.0网易云音乐播放器 （实时更新）
weixin_33887443的博客
07-11 563
本人在自学vue，之后想在学习过程中加以实践。由于之前有做过jquery的播放器效果，ui仿照网易云，地址 链接描述于是就想做vue 的网易云播放器，网上也有类似的项目。看了一下都挺不错的，于是就想自己做一个试试 项目基于Vue 2.0 使用Vue-router，axios获取本地的data.json文件（所有的用户，音乐信息），以及v...
第一课：慕课网Vue.js音乐播放器
weixin_37331426的博客
10-31 1586
1.用stylus去写代码需要手动到package.json 添加依赖 "stylus": "^0.54.5", "stylus-loader": "^2.1.1"2..eslintrc.js 添加规则 'eol-last': 0, //不检测新文件末尾是否有空行 'space-before-function-paren': 0 //在function的左括号前是否需要空格（0为不需要）3.
创建Music播放器demo
Palingenesis
07-03 831
创建简单Music播放器 在res目录下创建一个raw目录 raw目录是android中唯一不会自动创建的目录 存放的是android无法自动识别的文件 MediaPlayer 创建MeidiaPlayer调用reset方法，初始化MediaPlayer(调与不调没区别) 读取音乐文件 //最原始的方式获取文件 Resources resources = getResources(); Asset
慕课网vue音乐播放器实战：better-scroll实现轮播图
weixin_44823731的博客
07-09 303
知识点： better-scroll的生命周期函数：scrollEnd（页面滚动完自动调用）,beforeScrollStart（页面滚动前调用） 计算slider的宽度：slider的宽度 = 轮播图的数量 * 一个图片容器的宽度。如果你要实现循环播放，你就要多给两个图片容器的宽度，这个better-scroll内部用来克隆第一个和最后一个轮播图，实现无缝首尾切换。 屏幕大小变化的时候为什么不需要两倍的宽度？ 答：因为已经克隆了第一个和最后一个轮播图，dom上已经多了两个轮播图元素，此时我们this.c
使用vue.js制作一个音乐播放器
最新发布
06-07
好的，下面是使用 Vue.js 制作一个简单的音乐播放器的步骤： 1. 首先，需要引入 Vue.js 库和一些其他的库，比如 vue-router、axios、vant 等等。可以使用 npm 或者 CDN 的方式进行引入。 2. 在 Vue.js 的实例中，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值