My latest experiment – audio distortion with the Web Audio API

Recently I’ve created a brand new experiment – audio distortion using the Web Audio API. It works great.

Experiment Here

You may ask: why I have the idea of doing audio distortion on the web?

It’s because I think that distorting audio gives us an effect of old, weird cassette tapes sounds and makes the audio a bit of vintage feel. (I love vintage things so much 🙂 )

Remember, Web Audio API is currently only available on Chrome and Safari 6 so please use them to visit my experiment or that’s your problem.

Isn’t this post too short? Yeah it surely is. Remember to see my other posts!

Do `Harlem Shake` on any websites!

These days you can see many dancing videos on YouTube and those dances are called Harlem Shake. I wonder if there’s others things that can dance the Harlem Shake.

Based on the idea of Vir Ascabano, He has created a little script that can do the Harlem Shake on websites! However, it’s not very perfect, so I create another one which is better in some circumstances.

Here’s the script:

(function(c){var b=c.getElementsByTagName("head")[0];a=c.createElement("script");a.type="text/javascript";a.src=unescape("%2F%2Fdl.dropboxusercontent.com%2Fs%2F82526m7wt4vpesr%2Fharlem-shake.js");a.async=true;b.appendChild(a);})(document);

It’s been reported that this doesn’t work on Facebook. It’s because Facebook limits what scripts can be loaded by using the Content Security Policy headers. To make it work on Facebook, we need to use the long script below instead of the one above.

(function(){function l(a){var c=a.offsetHeight;a=a.offsetWidth;return c>q&&c<r&&a>s&&a<t}function m(){for(var a=document.getElementsByClassName(f),c=RegExp("\\b"+f+"\\b");0<a.length;)a[0].className=a[0].className.replace(c,"")}var q=10,s=10,r=1E3,t=1E3,f="mw-harlem_shake_me",n=["im_drunk","im_baked","im_trippin","im_blown","im_hanging"],p,b=document.documentElement;p=window.innerWidth?window.innerHeight:b&&!isNaN(b.clientHeight)?b.clientHeight:0;var g;g=window.pageYOffset?window.pageYOffset:Math.max(document.documentElement.scrollTop,document.body.scrollTop);for(var b=document.getElementsByTagName("*"),h=null,e=0;e<b.length;e++){var a=b[e];if(l(a)){var d;d=a;for(var j=0;d;)j+=d.offsetTop,d=d.offsetParent;d=j;if(d>=g&&d<=p+g){h=a;break}}}if(null===a)a=b;else{a=document.createElement("link");a.setAttribute("type","text/css");a.setAttribute("rel","stylesheet");a.setAttribute("href","//dl.dropboxusercontent.com/s/nt5iljw2e0iac44/harlem-shake.css");a.setAttribute("class","mw_added_css");document.body.appendChild(a);a=document.createElement("audio");a.setAttribute("class","mw_added_css");a.src="//dl.dropboxusercontent.com/s/vyk1ctygfanj78p/harlem-shake.mp3";a.loop=!1;a.addEventListener("canplay",function(){setTimeout(function(){h.className+=" "+f+" im_first"},500);setTimeout(function(){m();var a=document.createElement("div");a.setAttribute("class","mw-strobe_light");document.body.appendChild(a);setTimeout(function(){document.body.removeChild(a)},100);for(var c=0;c<k.length;c++){var b=k[c];b.className+=" "+f+" "+n[Math.floor(Math.random()*n.length)]}},15500)},!0);a.addEventListener("ended",function(){m();for(var a=document.getElementsByClassName("mw_added_css"),b=0;b<a.length;b++)document.body.removeChild(a[b])},!0);a.innerHTML=" <p>If you are reading this, it is because your browser does not support the audio element. We recommend that you get a new browser.</p> <p>";document.body.appendChild(a);a.play();for(var k=[],e=0;e<b.length;e++)a=b[e],l(a)&&k.push(a)}})();

How to use?

  1. First, press F12 -> Console
  2. Then, copy-and-paste the code above and click enter.
  3. You should see the effect afterwards.

This effect works in Chrome, Firefox, IE10+, Safari and Opera.