开发者社区> 刘哇勇> 正文
阿里云
为了无法计算的价值
打开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音乐播放器
在线演示 本地下载
903 0
HTML5+Ajax实现音乐播放器
本文播放器的音乐是通过豆瓣FM的API获取到的。Demo美观简单,可自行扩展其功能。
3504 0
jqm视频播放器,html5视频播放器,html5音乐播放器,html5播放器,video开发demo,html5视频播放示例,html5手机视频播放器
最近在论坛中看到了很多实用html5开发视频播放,音乐播放的功能,大部分都在寻找答案。因此我就在这里做一个demo,供大家相互学习。html5开发越来越流行了,而对于视频这一块也是必不可少的一部分。如何让你的网站占据优势,就要看你的功能和用户体验了。html5对video还是做了很多优惠的东西,我们使用起来很得心应手。<br> 在过去 flash 是网页上最好的解决视频的方法,截至到目前
2815 0
HTML5 之美:推荐9款优秀的 HTML5 音乐播放器
  过去,在网页上播放音频都是通过第三方插件来播放的,如 Flash、QuickTime 和 Silverlight 等,没有统一的音频播放标准。HTML5 通过 audio 元素来提供在网页中嵌入音频的标准方法,下面这9款 HTML5 音频播放器都是基于 audio 元素开发的,能够帮助你在网页中轻松的嵌入音频。
823 0
10 个基于 Web 的 HTML5 音乐播放器
HTML5 是一种用于创建和呈现的网页内容的语言。这是一个革命性的语言,它拥有一些真正棒的功能和一个新的HTML5规范允许本地音频流的播放。本文向你推荐 10 个最棒的 HTML5 音频播放器,看看你喜欢哪个! Speakker Speakker 是一个基于 Web 浏览器的音乐播放器,只提供很多高级播放功能包括播放列表管理和分享。
1126 0
HTML5 之美:推荐9款优秀的 HTML5 音乐播放器
过去,在网页上播放音频都是通过第三方插件来播放的,如 Flash、QuickTime 和 Silverlight 等,没有统一的音频播放标准。HTML5 通过 audio 元素来提供在网页中嵌入音频的标准方法,下面这9款 HTML5 音频播放器都是基于 audio 元素开发的,能够帮助你在网页中轻松的嵌入音频。
1117 0
【前端面试知识题】- 3. HTML && CSS
它是Web应用程序的传输协议,提供了双向的、按序到达的数据流。它是HTML5新増的协议, WebSocket的连接是持久的,它在客户端和服务器之间保持双工连接,服务器的更新可以及时推送到客户端,而不需要客户端以一定的时间间隔去轮询。
0 0
HTML之文本格式化、链接、头部、CSS(笔记小结)
HTML之文本格式化、链接、头部、CSS(笔记小结)
0 0
【前端】css布局html页面之inline-block布局错位解决方法
本篇文章中,主要讲讲前端布局的情况 对于,对于刚接触前端开发的小伙伴来说,布局是一个比较重要的知识点,如果知识点理解不到位,那么很容易出现布局错位的情况
0 0
通过DOM对HTML文档的元素内容和CSS样式进行操作
通过DOM对HTML文档的元素内容和CSS样式进行操作 通过前面的学习我们应该可以了解到,通过DOM我们可以操作HTMl文档中的任意的元素及属性,文本内容。其实实际工作中我们用到最多的是怎样通过DOM操作HTML文档中的CSS样式。 HTML代码: <button id="btn">切换</button> <div class="wrap" id="wrap" style="color: yellow;"> <p id="text" class="text">这是一个段落</p> <ul class="list">
0 0
+关注
刘哇勇
前端,编程语言相关技术专家
文章
问答
文章排行榜
最热
最新
相关电子书
更多
天猫 HTML5 互动技术实践
立即下载
天猫HTML5互动技术实践
立即下载
《零基础HTML入门教程》
立即下载