琢磨了一下前两天google的那个电吉他的doodle原理,于是就写了这个(伪)太鼓达人10周年纪念doodle。
http://goo.gl/v1RQw

  • Chrome能出声
  • FireFox4不能出声
  • Safari能出声
  • Opera11下面的搜索框显示不出来。。。

代码片段一:根据点击Canvas位置的颜色判定是咚还是咔。

var data=$("doodle").getContext("2d").getImageData(event.offsetX,event.offsetY,1,1).data;
var red=data[0];
var green=data[1];
var blue=data[2];
if(red>200 && green<100 && blue<100) playDon();
else if(red<150 && green>150 && blue>150) playKat();

代码片段二:播放声音。Google为了提高兼容性用的是Flash,我直接用的HTML5的Audio元素。

function playDon() {
  if(don.readyState == 4)
    { don.currentTime=0; don.play(); }
}
<audio id="don" src="don.wav" proload>