学习了几周的vuejs,学习的过程中做了一个音乐播放器WebApp (顺便听听音乐~) ,过程中也有借鉴过别人做的,感觉受益匪浅

链接

项目在线地址 : 音乐播放器

github : https://github.com/houbx/webApp

技术栈

  • vue2.0
  • vue-router 2.x
  • vuex 2.x

实现

  • 数据来源用的是QQ音乐的官方接口
  • 四个主页面 推荐 排行 歌单 我的 (其实是3个 我的页面什么都没有)
  • 排行榜
  • 轮播图
  • 音乐播放 开始 暂停 上一首 下一首
  • 搜索歌曲和歌手
  • 播放列表
  • 歌词 (暂时不存在,本来是有的 ,后来由于位置不好看暂时移除)

项目截图

一点总结

  • 总体来说 我做的这个和别人的比起来还是有差距的 还要继续学习 持续改进 , 如果看着还行的话给个star吧 !

Vue2.0音乐播放器的更多相关文章

  1. Android音乐播放器源码(歌词.均衡器.收藏.qq5.0菜单.通知)

    一款Android音乐播放器源码,基本功能都实现了 qq5.0菜单(歌词.均衡器.收藏.qq5.0菜单.通知) 只有向右滑动出现,菜单键和指定按钮都还没有添加. 源码下载:http://code.66 ...

  2. [转载]历上最强的音乐播放器（jetAudio-8.0.5.320-Plus-VX

    原文地址:历上最强的音乐播放器(jetAudio-8.0.5.320-Plus-VX-完全汉化版)下载作者:盖世天星 历上最强的音乐播放器(jetAudio-8.0.5.320-Plus-VX-完全汉 ...

  3. 迷你音乐播放器v1.0正式上线!

    迷你音乐播放器V1.0正式上线! 版本介绍: 1.随机播放切换开关(通过点击专辑图片) 2.通过拖动歌曲名及艺术家名调整歌曲播放进度 3.手机浏览访问支持熄屏播放 4.暂不支持在线搜索功能 快来一起分 ...

  4. swift3.0 简单直播和简单网络音乐播放器

    本项目采用swift3.0所写,适配iOS9.0+,所有界面均采用代码布局. 第一个tab写的是简单直播,传统MVC模式,第二个tab写的是简单网络音乐播放器.传说MVVM模式(至于血统是否纯正我就不 ...

  5. 卡拉OK效果的实现-iOS音乐播放器

    自己编写的音乐播放器偶然用到这个模块,发现没有思路,而且上网搜了搜,关于这方面的文章不是很多,没找到满意的结果,然后自己也是想了想,最终实现了这种效果,想通了发现其实很简单. 直接上原理: 第一种: ...

  6. 小菜学习Winform（二）WMPLib实现音乐播放器

    前言 现在网上有很多的音乐播放器,但好像都不是.net平台做的,在.net中实现音乐文件的播放功能很简单,下面就简单实现下. SoundPlayer类 在.net提供了音乐文件的类:SoundPlay ...

  7. 【大结局】《从案例中学习JavaScript》之酷炫音乐播放器（四）

    这是之前写的用H5制作的音乐播放器,前三节其实已经做得差不多了,音轨的制作原理已经在上一节说明,不过一直还没有和音乐对接. 本章作为该系列的一个完结篇,我会专门把动态音轨的实现代码贴出来,demo地址 ...

  8. Andriod小项目——在线音乐播放器

    转载自: http://blog.csdn.net/sunkes/article/details/51189189 Andriod小项目——在线音乐播放器 Android在线音乐播放器 从大一开始就已 ...

  9. Android开发6：Service的使用（简单音乐播放器的实现）

    前言 啦啦啦~各位好久不见啦~博主最近比较忙,而且最近一次实验也是刚刚结束~ 好了不废话了,直接进入我们这次的内容~ 在这篇博文里我们将学习Service(服务)的相关知识,学会使用 Service ...

随机推荐

  1. 字符集 ISO-8859-1（2）

    HTML 支持的数学符号 结果 描述 实体名称 实体编号 ∀ for all ∀ ∀ ∂ part ∂ ∂ ∃ exists &exists; ∃ ∅ empty ∅ ∅ ∇ nabla ∇ ...

  2. 如何去掉Atom的右键菜单？

    Win+R -- regedit -- Ctrl+F -- 搜索"Atom"(或者直接"Open with Atom") -- 找到有个值为Open with ...

  3. HibernateTemplate实现查询distinct构造对象

    1,hql代码 select distinct new UserLogins( u.username,u.person,u.accName) from UserLogins u where u.ipA ...

  4. 分析器错误消息: 无法识别的属性“targetFramework”。

    配置错误 说明: 在处理向该请求提供服务所需的配置文件时出错.请检查下面的特定错误详细信息并适当地修改配置文件. 分析器错误消息: 无法识别的属性“targetFramework”.请注意属性名称区分 ...

  5. V8 Javascript 引擎设计理念

    Netscape Navigator 在 90 在年代中期对 JavaScript 进行了集成,这让网页开发人员对 HTML 页面中诸如 form .frame 和 image 之类的元素的访问变得非 ...

  6. Oracle to_char格式化函数 显示毫秒

    racle如何显示毫秒   date类型只能精确到秒,要想精确到毫秒,需要使用timestamp类型.   应用举例:   举例1:   select to_char(systimestamp,'yy ...

  7. 导入礼包时，遇到file_get_contents读取的文本，去除空格、换行等的方法

    解决方法:正则替换: 代码:$gift_code_str = preg_replace('/((\s)*(\n)+(\s)*) /i ',',',file_get_contents($gift_cod ...

  8. eclipse安装git插件

    用Eclipse开发,有时需要团队协作,git就是个比较好的选择.下面简单介绍一下git插件的安装方法:   1.Help -- install new software 打开插件安装界面 2.点ad ...

  9. 基于Casperjs的网页抓取技术【抓取豆瓣信息网络爬虫实战示例】

    CasperJS is a navigation scripting & testing utility for the PhantomJS (WebKit) and SlimerJS (Ge ...

  10. JAVA中的基本数类型据

    一.基本类型​ byte: java中最小的数据类型.1字节/8位.-128(2^7)~127(2^7-1),默认值0. short: 短整型,2字节/16位,取值范围-32768(--2^15)~3 ...