参与 HTML5 云端 Coding 大赛投票，即有机会中奖哦 !

投票页面已有越来越多的好项目啦!如果你也是开发者 or 纯观众，记得去到活动页面 投票!投票!投票!

为什么小编这么激动呢? 因为 Coding 将在投票结束后，针对参与投票的用户 进行 抽奖 !!!

我会告诉你奖品有环信卫衣&电脑包、UPYUN 杯子、极客学院精美本子、七牛卡哇伊公仔...还有 Coding 定制精美礼品吗!

(活动链接: https://coding.net/event/html5）

现在，小编就带你来领略一下 HTML5 云端 Coding 的魅力吧!

第三期推荐: Audio-Visualizations ，这是一个使用Web Audio API的音乐可视化演示。

---

Audio-Visualizations

作者:@luojia(Coding ID)

使用方法

打开演示后点击顶部的按钮选择音乐文件，或者把音乐文件拖放到按钮上。

查看自制 Debug:在控制台执行 COL.Debug.on() ，关闭 Debug: COL.Debug.off() 。

注意

1. 不建议换歌，因为FF和Chrome对相关API的处理方式不同而会造成不同的结果。

2. 部分旧版本chrome和opera在一些机器上渲染效果会出现问题，如果你看到了类似升阳战旗的东西，请更新浏览器。

使用的库

自制 canvas 库: CanvasObjectLibrary

不支持的浏览器

IE，由于FireFox严格的安全机制，此演示在其中将回滚到旧版本的形态。（不同于在Chrome和Opera中的效果）

文件说明

1. CanvasObjectLibrary.js 自制canvas库

2. GraphLib.js COL的外挂简易图形库

3. index.html 项目代码

ps 介绍一下如何把它玩坏(控制台里输入以下东西)

• COL.autoClear=false

• COL.Debug.on();COL.Debug.eleinfo=true; //体现电脑配置的时候到了

• speed=5

• text.zoom.x=-1;

• text.zoom.y=2;

• cr=2000;

• audioBufferSouceNode.stop();

• clearInterval(cctm);setInterval(function(){codingcircle.rotate+=50;},20);

• sidecircletemple.setR(400)

演示截图

本次项目介绍，就到这里啦!

如果还想看看更多好玩儿的 HTML5 项目

请点击 阅读原文 哦~