己基于vue写了一个 Mplayer,

github地址:https://github.com/xiangwenhu/MPlaer

演示地址:http://babydairy2017.cloudapp.net:3000/index#/index

只有简单的搜索播放随心听功能,样式适配上也很差, 路由就两个,数据都走vuex,数据转发是用nodejs自己转发,而且只是PC能比较好的展现,之后不了了之,偶尔也自己上来听听歌曲。

有一天,抬头看,有一片云,特别的蓝,风一吹,一阵花香飘来,美好,美好的东西都是慢慢积累出来的。

于是开始基于vue重写Mplayer,重命名为VBox。Github地址:https://github.com/xiangwenhu/vbox

功能参考:https://y.qq.com/ ,

基本功能

  首页,

  歌手,

  专辑,

  排行榜,

  歌单,

  MV,

  搜索,

  分享,

  设置

其他功能

响应式布局- 基于rem

延伸功能: 

零张图片 - 程序上零图片,css话或者canvas绘画

 版本更新- 基于 Service Worker

 资源预测 - 基于 Web Worker/prefetch ,比如检查到时wifi后,打开首页后,Web Worker 自动去拉取其他功能第一屏幕的数据, 某个功能展现后,预拉取第二页的数据

  离线播放-基于 FileSystem&IndexedDB, 基于FileSystem 的大文件离线存储已经实现一个基本版本,地址:https://github.com/xiangwenhu/BlogCodes/tree/master/client/FileSystem

 自我录制- 基于 MediaRecorder

在线分享- 基于 Web RTC

失焦即停 - 基于 Page Visibility,可以在设置里面设置。

  QQ/微信登陆 - 真的一样,酷啊(难度不小哈)

这些看起来挺多,也有一定的难度,知难而行,喜欢就好。

写下这么多,一方面是鼓励自己加油,一方面是告诫自己,路很长,加油。

现在基本功能开发了一些,给几张截图安慰一下自己。

VBox 一款基于vue开发的音乐盒 序章的更多相关文章

  1. 从开发一款基于Vue技术栈的全栈热重载生产环境脚手架,我学到了什么

    浏览文章前 这一期,我分享给大家三点看源码的小技巧,这也是从别的大佬那总结的. 被反复使用的代码 这样的代码是一个软件的重点函数,一个大神的写法有很多精华值得学习. 穿越时间的代码 如果一段代码10年 ...

  2. Xsoup 是一款基于 Jsoup 开发的

    Xsoup 是一款基于Jsoup 开发的,使用XPath抽取Html元素的工具.它被用于作者的爬虫框架 WebMagic 中,进行XPath 解析和抽取. 此次更新主要增加了一些XPath语法的支持. ...

  3. 一款基于Netty开发的WebSocket服务器

    代码地址如下:http://www.demodashi.com/demo/13577.html 一款基于Netty开发的WebSocket服务器 这是一款基于Netty框架开发的服务端,通信协议为We ...

  4. 基于Vue开发的tab切换组件

    github地址:https://github.com/MengFangui/VueTabSwitch 1.index.html <!DOCTYPE html> <html lang ...

  5. 基于Vue开发的门户网站展示和后台数据管理系统

    基于Vue的前端框架有很多,这几年随着前端技术的官方应用,总有是学不完的前端知识在等着我们,一个人的精力也是有限,不可能一一掌握,不过我们学习很大程度都会靠兴趣驱动,或者目标导向,最终是可以以点破面, ...

  6. 【全面解禁!真正的Expression Blend实战开发技巧】序章

    原文:[全面解禁!真正的Expression Blend实战开发技巧]序章 从silverlight2开始我也和大家一样一直在跟随微软的脚步,从sl2~sl4一步一步过来,总结了不少心得体会.由于各种 ...

  7. 基于VUE开发项目

    前言 最近由于公司需要,需要写一个相对来说比较大型的后台管理系统.为了保证管理系统操作体验较为舒适并且项目后期益于维护,最后决定基于VUE全家桶来开发一个高度组件化的单页SPA应用. 技术选型 vue ...

  8. 一款基于Vue的扩展性组件库 VV-UI

    github: https://github.com/VV-UI/VV-UI 演示地址: https://vv-ui.github.io/VV-UI/#/meta-info 1. LoadingBar ...

  9. 推荐几款基于vue的使用插件

    1.muse-ui ★6042 - 三端样式一致的响应式 UI 库 2.vuetify ★11169 - 为移动而生的Vue JS 2组件框架 3.Vux ★12969- 基于Vue和WeUI的组件库 ...

随机推荐

  1. TCP程序中发送和接收数据

    这里我们来探讨一下在网络编程过程中,有关read/write 或者send/recv的使用细节.这里有关常用的阻塞/非阻塞的解释在网上有很多很好的例子,这里就不说了,还有errno ==EAGAIN ...

  2. linux0.11学习笔记(1)

    公布软件包包括内容: bootimage.Z - 具有美国键盘代码的压缩启动映像文件: rootimage.Z - 以1200kB 压缩的根文件系统映像文件: linux-0.11.tar.Z- 内核 ...

  3. 新书《Linux就是这个范儿》预售

    预售地址 当当 内容简单介绍 本书内容源自淘宝技术大学的培训实战.由来自阿里巴巴集团的资深Linux系统专家赵鑫磊和相同来自阿里巴巴集团的支付宝网络技术有限公司的高级专家Jie Zhang(张洁)共同 ...

  4. Android4.0-4.4 加入支持状态栏显示耳机图标方法(支持带不带MIC的两种耳机自己主动识别)

    效果如图: 一. 在frameworks/base/packages/SystemUI/res/values/strings.xml 里加入 <string name="headset ...

  5. springboot学习笔记-4 整合Druid数据源和使用@Cache简化redis配置

    一.整合Druid数据源 Druid是一个关系型数据库连接池,是阿里巴巴的一个开源项目,Druid在监控,可扩展性,稳定性和性能方面具有比较明显的优势.通过Druid提供的监控功能,可以实时观察数据库 ...

  6. Android studio导入eclipse项目(亲测)

    之前上网搜索的时候,网上都说先用eclipse导出gradle,之后再用Android Studio的import project导入,但是这个方法使用的过程中会出现许多错误,解决了一个又一个还是不得 ...

  7. 多表连接时USING和ON的区别,USING会去掉重复列,ON显示重复列。

  8. Python学习日记day3:数据类型

    1.数据类型int :如1.2.4等, 用于计算 bool: True , False ,用户判断 str: 储存少量数据,进行操作.如:'fdasklfjfladfl','而而噩噩','1234' ...

  9. Kotlin——最详细的常量、变量、注释的使用

    在Kotlin中的变量.常量以及注释多多少少和Java语言是有着不同之处的.不管是变量.常量的定义方式,还是注释的使用.下面详细的介绍Kotlin中的变量.常量.注释的使用.以及和Java的对比. 如 ...

  10. Python 项目实践二(下载数据)第四篇

    接着上节继续学习,在本节中,你将下载JSON格式的人口数据,并使用json模块来处理它们.Pygal提供了一个适合初学者使用的地图创建工具,你将使用它来对人口数据进行可视化,以探索全球人口的分布情况. ...