将之前捣腾的音乐频谱效果加上一个播放列表就成了现在的喵喵播放器(Meow meow Player,额知道这名字很二很装萌~)，全HTML5打造的网页程序，可本地运行也可以挂服务器上用。

在线Demo及源码

你可以访问下面的地址打开在线demo：

项目github地址：

欢迎喜欢的朋友前去星(star)我叉(fork)我或者下载代码自己研究。

Note

支持文件拖拽上传，同时你也可以点击页面上的'Add'来添加音乐文件

对文件大小做了限制，只处理30M以下的文件，这是为了防止内存上涨把浏览器爆掉

同时在对文件解码时对页面上可进行的操作进行了屏蔽，为是防止一些非法操作导致逻辑出错

程序可能报bug，但娱乐基本够用

目前，列表的打乱功能还没做好，即'Shuffle'(Update:此功能已实现)

缺憾是没有实现暂停功能，因为web audio api没有提供相关接口

浏览器兼容性

工作于支持Web Audio API 的浏览器，开发测试的浏览器为Chrome 33, Firefox 28.

Chrome

Firefox

技术点

基本上来说，用到了以下一些技术：

Web Audio API

HTML5 canvas绘图

HTML5 requstAnimation绘制动画

CSS3 anmation, transition, transform ,etc.

FileReader JavaScript中用于文件获取

其中，有些代码参考甚至直接来自网上现成的代码：

带有渐变且半透明效果的遮罩用于频谱图的镜像，参考了代码引用1的代码

用于播放列表的Win8 进度效果的CSS3实现来自codepen上的代码，地址见引用2

问题及交流

欢迎技术爱好者，极客朋友，前端开发人员，喜欢捣腾新东西以及广大喜欢炫酷新鲜玩意儿的用户朋友们反馈问题或者提建议。

你可以访问项目的GitHub 页面 获取代码，star我fork我或者open an issue.

你可以访问在线demo 查看效果，获得至尊感受

你还可以访问之前一篇博客获得关于实现的详细信息

Reference

仿酷狗音乐播放器开发日志十九——CTreeNodeUI的bug修复二(附源码)

转载请说明原出处,谢谢 今天本来打算把仿酷狗播放列表的子控件拖动插入功能做一下,但是仔细使用播放列表控件时发现了几个逻辑错误,由于我的播放 列表控件是基于CTreeViewUI和CTreeNodeUI ...

仿酷狗音乐播放器开发日志二十四 选项设置窗体的实现(附328行xml布局源码)

转载请说明原出处,谢谢~~ 花了两天时间把仿酷狗的选项设置窗体做出来了,当然了只是做了外观.现在开学了,写代码的时间减少,所以整个仿酷狗的工程开发速度减慢了.今天把仿酷狗的选项设置窗体的布局代码分享出 ...

项目源码--Android类似酷狗音乐播放器

下载源码 知识技能概要: 1.音乐文件的扫描与管理 2.音频流的解码 3. UI控件的综合使用 4.播放列表方式管理 5.随机播放方式 6.源码带详细的中文注释 ...... 详细介绍 1. 音乐文件 ...

项目源码--Android本地音乐播放器

下载源码 技术要点: 1.本地音乐播放与管理 2.支持在线下载 3.非库音频流的解码 4. UI控件的综合使用 5. HTTP通信模块 6. Mysql数据库的综合使用 7. 后台服务技术 8. 源码 ...

android本地音乐播放器

乐乐音乐播放器更新到2.0版本了,之前1.0版本更多的是试验性实践,这次更新的2.0版本,更多的是将1.0的功能移植到2.0,在界面和皮肤风格上,参考了 天天动听 界面,在歌词显示方面 与 1.0 版 ...

Redrain仿酷狗音乐播放器开发完毕，发布测试程序

转载请说明原出处,谢谢~~ 从暑假到现在中秋刚过,我用duilib开发仿酷狗播放器大概经历了50天.做仿酷狗的意图只是看原酷狗的界面比较漂亮,想做个完整一些的工程来练习一下duilib.今天把写好的程 ...

仿酷狗音乐播放器开发日志二十七 用ole为窗体增加文件拖动功能(附源码)

转载请说明原出处,谢谢~~ 中秋到了,出去玩了几天.今天把仿酷狗程序做了收尾,已经开发完成了,下一篇博客把完结的情况说一下.在这篇博客里说一下使用OLE为窗体增加文件拖拽的功能.使用播放器,我更喜欢直 ...

HTML5+CSS3+jquery实现简单的音乐播放器

...最近天热的,感觉就像煎饼...然后别人在把妹子的时候,只有偶们这帮苦逼的程序员在那边撸代码...我日哦! 然后今天晒的是偶早年写的一个播放器...看上去是不是很有感觉的样子!一番宝物,Lisa唱 ...

仿酷狗音乐播放器开发日志十一——CTreeNodeUI的bug修复

由于做播放列表控件,我的CMusicLength控件继承了CTreeVieWUI控件,在向分组控件中添加播放项目时,发现代码无法正常工作,调用CTreeNodeUI控件的Add方法后无反应,导致我的播 ...

随机推荐

基于caffe的艺术迁移学习 style-transfer-windows+caffe

这个是在去年微博里面非常流行的,在git_hub上的代码是https://github.com/fzliu/style-transfer 比如这是梵高的画 这是你自己的照片 然后你想生成这样 怎么实现 ...

IGS_学习笔记09_IREP生成服务后台工具Soagenerate.sh

2015-01-06 Created By BaoXinjian 参考:张礼军 - http://oracleseeker.com/2009/10/23/irep_service_generation ...

HighCharts基本使用实例(入门)

HighCharts 摘要 HighCharts是眼下最为流行的图表插件,应用范围广泛,眼下支持曲线图.区域图.3D图.柱状图.饼图.散列图.混合图等,而且还支持一些拓展的特殊图表,如:仪表图.极地图 ...

Svg图片在asp网站上的使用

最近需要做一个动态的根据后台的返回数据而动态显示的导航图,然后我就采用了jquery+ajax+SVG矢量图来实现这个功能. 首先,客户给了个ai的矢量图,我对这一块不懂就找以前同事帮我转成了svg图 ...

REMOTE HOST IDENTIFICATION HAS CHANGED

今天在使用scp命令上传文件到远端服务器时报如下错误,(ssh命令连接到远程服务器时也报同样的错误): @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ ...

产品经理(五岁以下儿童)myVegas Slots排名上升的秘密

myVEGAS Slots于AppStore上排名在今年也就是2月份时候飙升,那么什么情况导致这个现象的呢,我们试图通过App Annie的分析给出答案. 上面是myVegas的排名情况,我们能够看到 ...

Codeforces Round #243 (Div. 2) Problem B - Sereja and Mirroring 解读

http://codeforces.com/contest/426/problem/B 对称标题的意思大概是.应当指出的,当线数为奇数时,答案是线路本身的数 #include

java中的输入流(Scanner),数据类型，运算符,switch,数组的用法

//java中创建包用package相当于C#的命名空间namespace,java中导入包用import相当于C#中引入命名空间usingimport java.util.*;//导入包,*代表导入 ...

ELk(Elasticsearch, Logstash, Kibana)的安装配置

目录 ELk(Elasticsearch, Logstash, Kibana)的安装配置 1. Elasticsearch的安装-官网 2. Kibana的安装配置-官网 3. Logstash的安装 ...

error while loading shared libraries错误解决

在编译引用了第三方库的代码后,执行出现了以下错误 [work@xxx zktest]$ ./a.out ./a.out: error while loading shared libraries: l ...