资讯专栏INFORMATION COLUMN

使用Vue2.0制作音乐播放器

taoszu / 721人阅读

摘要:基于的音乐播放器音乐该应用使用全家桶完成,借助音乐来实现音乐搜索播放,应用持续更新中源代码源代码地址如果觉得还不错的大家可以给个我会持续更新的附音乐整理效果图在线预览在线预览地址音乐播放器端请在浏览器的移动端模式下查看使用使用依赖目

基于Vue2.0的音乐播放器(QQ音乐API)

该应用使用Vue全家桶完成,借助QQ音乐api来实现音乐搜索播放,应用持续更新中...

源代码

源代码地址:GitHub
如果觉得还不错的大家可以给个star我会持续更新的(github附QQ音乐api整理)

效果图

在线预览

在线预览地址: Vue音乐播放器 (PC端请在浏览器的移动端模式下查看)

使用 Build Setup
# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build
使用依赖
   animate.css
   vue-router
   vue-resource
   webpack
   vue-awesome-swiper...
目录结构
├── README.md           
├── config             // 项目不同环境的配置
├── index.html         // 项目入口文件
├── dist               // 项目build目录
├── package.json       // 项目配置文件
├── src                // 生产目录
│   ├── assets         // css js 和图片资源
│   ├── components     // 各种组件
│   ├── store          // vuex状态管理器
│   ├── json           // 推荐页面数据
│   ├── App.vue        
│   └── main.js        // Webpack 预编译入口
已实现功能:
   音乐播放
   自动播放下一曲
   音乐列表(增删)
   下一曲
   排行榜
   排行榜详情页
   搜索
   loading
   播放详情页
   滚动歌词
   展示音乐进度
   音乐进度的拖拽
   侧边栏
欢迎技术交流,xiaoyuliu.webdeveloper@gmail.com 微信:13216210763 (欢迎大家“骚扰”)

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/82885.html

相关文章

  • 资源集 - 收藏集 - 掘金

    摘要:行爬取顶点全网任意小说掘金之前连续多篇文章介绍客户端爬取平台,今天我们从零开始,实现爬取顶点小说网任意一本小说的功能。文件标记所有文件我的后端书架后端掘金我的后端书架月前本书架主要针对后端开发与架构。 30行js爬取顶点全网任意小说 - 掘金之前连续多篇文章介绍客户端爬取平台(dspider),今天我们从零开始,实现爬取顶点小说网任意一本小说的功能。 如果你还不知道客户端爬取,可以先看...

    stdying 评论0 收藏0
  • 资源集 - 收藏集 - 掘金

    摘要:行爬取顶点全网任意小说掘金之前连续多篇文章介绍客户端爬取平台,今天我们从零开始,实现爬取顶点小说网任意一本小说的功能。文件标记所有文件我的后端书架后端掘金我的后端书架月前本书架主要针对后端开发与架构。 30行js爬取顶点全网任意小说 - 掘金之前连续多篇文章介绍客户端爬取平台(dspider),今天我们从零开始,实现爬取顶点小说网任意一本小说的功能。 如果你还不知道客户端爬取,可以先看...

    马忠志 评论0 收藏0
  • 基于vue-cli 构建 使用全家桶实现 音乐放器

    摘要:这边忙完了会首先把滚轮实现思路跟大家讲一下滚轮实现思路展示音乐播放器优化滚轮性能优化自定义指令自定义 先上最终效果地址 PC 开启手机浏览器模式 从vue2.0 开始接触,然后一边看官网教程一边写demo, 主要实现以下 PC端 时间选择插件 【涉及 props, watch, mounted,transaction内置组件 和组件开发熟悉】 demo 移动端 仿IOS滚轮 时间选择 ...

    netScorpion 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<