开发者社区> 刘哇勇> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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本地存储之Web Storage
Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,WebStorage官方建议为每个网站5MB。 Web Storage又分为两种:        sessionStorage        localStorage   从字面意思就可以很清楚的看出来,ses
1197 0
HTML5--本地存储Web Storage
Web Storage功能,顾名思义,就是在Web上针对客户端本地储存数据的功能,具体来说Web Storage分为两种; sessionStorage:   将数据保存在session对象中,所谓session是指用户在浏览某个网站时,从进入网站到浏览器关闭所经过的这段时间,也就是用户浏览这个网站所花费的时间。
885 0
uiu
HTML+CSS各类布局模式介绍
HTML+CSS各类布局模式介绍
27 0
html+css实战85-综合案例1
html+css实战85-综合案例1
25 0
html+css实战83-显示模式-继承性
html+css实战83-显示模式-继承性
28 0
html+css实战86-综合案例2
html+css实战86-综合案例2
31 0
html+css实战50-通配符
html+css实战50-通配符
51 0
html+css实战48-类选择器
html+css实战48-类选择器
20 0
+关注
刘哇勇
前端,编程语言相关技术专家
文章
问答
文章排行榜
最热
最新
相关电子书
更多
天猫 HTML5 互动技术实践
立即下载
FLINK在大规模实时无效广告流量检测中的应用
立即下载
《企业全面上云成功路径与实践》
立即下载