HTML5打造的炫酷本地音乐播放器-喵喵Player

简介: 将之前捣腾的音乐频谱效果加上一个播放列表就成了现在的喵喵播放器(Meow meow Player,额知道这名字很二很装萌~),全HTML5打造的网页程序,可本地运行也可以挂服务器上用。   在线Demo及源码 你可以访问下面的地址打开在线demo: http://wayou.

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

 

在线Demo及源码

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

http://wayou.github.io/MeowmeowPlayer/

项目github地址:

https://github.com/Wayou/MeowmeowPlayer/

 

示例音乐下载,提供给硬盘里没有Music的同学:http://pan.baidu.com/s/1eQqqSfS

欢迎喜欢的朋友前去(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

  1. http://hammerspace.co.uk/2012/02/css3-gradients-with-transparency
  2. http://codepen.io/jameswyse/pen/uisvk
  3. http://www.cnblogs.com/Wayou/p/html5_audio_api_visualizer.html

 

目录
相关文章
|
移动开发 HTML5
HTML5音乐播放器
在线演示 本地下载
1424 0
|
前端开发 JavaScript API
HTML5+Ajax实现音乐播放器
本文播放器的音乐是通过豆瓣FM的API获取到的。Demo美观简单,可自行扩展其功能。
4283 0
|
移动开发 HTML5 内存技术
jqm视频播放器,html5视频播放器,html5音乐播放器,html5播放器,video开发demo,html5视频播放示例,html5手机视频播放器
最近在论坛中看到了很多实用html5开发视频播放,音乐播放的功能,大部分都在寻找答案。因此我就在这里做一个demo,供大家相互学习。html5开发越来越流行了,而对于视频这一块也是必不可少的一部分。如何让你的网站占据优势,就要看你的功能和用户体验了。html5对video还是做了很多优惠的东西,我们使用起来很得心应手。<br> 在过去 flash 是网页上最好的解决视频的方法,截至到目前
3585 0
|
移动开发 JavaScript 前端开发
HTML5 之美:推荐9款优秀的 HTML5 音乐播放器
  过去,在网页上播放音频都是通过第三方插件来播放的,如 Flash、QuickTime 和 Silverlight 等,没有统一的音频播放标准。HTML5 通过 audio 元素来提供在网页中嵌入音频的标准方法,下面这9款 HTML5 音频播放器都是基于 audio 元素开发的,能够帮助你在网页中轻松的嵌入音频。
1143 0
|
Web App开发 移动开发 前端开发
10 个基于 Web 的 HTML5 音乐播放器
HTML5 是一种用于创建和呈现的网页内容的语言。这是一个革命性的语言,它拥有一些真正棒的功能和一个新的HTML5规范允许本地音频流的播放。本文向你推荐 10 个最棒的 HTML5 音频播放器,看看你喜欢哪个! Speakker Speakker 是一个基于 Web 浏览器的音乐播放器,只提供很多高级播放功能包括播放列表管理和分享。
1572 0
|
Web App开发 存储
HTML5本地存储之Web Storage
Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,WebStorage官方建议为每个网站5MB。 Web Storage又分为两种:        sessionStorage        localStorage   从字面意思就可以很清楚的看出来,ses
1389 0
|
Web App开发 存储 前端开发
HTML5--本地存储Web Storage
Web Storage功能,顾名思义,就是在Web上针对客户端本地储存数据的功能,具体来说Web Storage分为两种; sessionStorage:   将数据保存在session对象中,所谓session是指用户在浏览某个网站时,从进入网站到浏览器关闭所经过的这段时间,也就是用户浏览这个网站所花费的时间。
960 0
|
7天前
|
前端开发 JavaScript 开发工具
【HTML/CSS】入门导学篇
【HTML/CSS】入门导学篇
16 0
|
2天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
13 1
|
2天前
|
PHP
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册