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

 

目录
相关文章
|
6天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
42 6
|
移动开发 前端开发 API
HTML5 Canvas 实现简易 绘制音乐环形频谱图
参考资料:1.Web 技术研究所2.Web_Audio_API 0.启发 在B站我们有很多的小伙伴们应该都看到过用AE做的可视化音乐播放器播放音乐的视频,看着特别酷炫带感有木有。
2916 0
|
3月前
|
前端开发 程序员
HTML+CSS+JavaScript制作动态七夕表白网页(含音乐+自定义文字)
一年一度的520情人节/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就分享下前端代码如何实现HTML+CSS+JavaScript制作七夕表白网页(含音乐+自定义文字)。赶紧学会了,来制作属于我们程序员的浪漫吧!
75 0
HTML+CSS+JavaScript制作动态七夕表白网页(含音乐+自定义文字)
|
6月前
|
开发工具 CDN 容器
基于Html+腾讯云播SDK开发的m3u8播放器
周末业余时间在家无事,学习了一下腾讯的云播放sdk,并制作了一个小demo(m3u8播放器),该在线工具是基于腾讯的云播sdk开发的,云播sdk非常牛,可以支持多种播放格式。
234 1
|
JavaScript 前端开发
html+原生js制作一个简易音乐播放器
html+原生js制作一个简易音乐播放器
151 0
|
11月前
|
Web App开发 存储 前端开发
❤️使用 HTML、CSS 和 JS 创建在线音乐播放器(含免费完整源码)❤️
❤️使用 HTML、CSS 和 JS 创建在线音乐播放器(含免费完整源码)❤️
370 0
|
JavaScript 前端开发
js逐步教实现音乐系统(html逻辑 css逻辑 js逻辑)
js逐步教实现音乐系统(html逻辑 css逻辑 js逻辑)
js逐步教实现音乐系统(html逻辑 css逻辑  js逻辑)
|
Web App开发 移动开发 前端开发
HTML5实例教程——制作酷炫音频播放器插件
上图便是这个音频播放器的UI界面图,里面还隐藏了一个歌曲的播放列表。整个播放器的UI除了大背景的人像图和歌曲的星星评分使用了图片其他全部由CSS和font-face绘制而成,看上去有难度的地方就只有CD和打碟器的制作了,在歌曲播放时CD和打碟器都是具有动画交互效果的,这个在后面的部分会讲解到。点击播放器的CD可以打开播放列表噢~
321 0
HTML5实例教程——制作酷炫音频播放器插件
|
移动开发 HTML5
HTML5音乐播放器
在线演示 本地下载
1451 0