trying out blobs with chrome after using them in my screen capture ex…

…tension -- stil crashes sometimes during piano contstruction though... -- http://updates.html5rocks.com/2012/06/Don-t-Build-Blobs-Construct-Them

audio.js

@@ -8,6 +8,15 @@ window.log = function f(){ log.history = log.history || []; log.history.push(arg
 
 (function() {
 
+    // test if we can use blobs
+    var canBlob = false;
+    if ((window.URL || window.webkitURL) && window.Blob) {
+        try {
+            new Blob();
+            canBlob = true;
+        } catch(e) {}
+    }
+
     function asBytes(value, bytes) {
         // Convert value into little endian hex bytes
         // value - the number as a decimal integer (representing bytes)
@@ -159,7 +168,19 @@ window.log = function f(){ log.history = log.history || []; log.history.push(arg
             dataChunk
         ].join('');
 
-        return 'data:audio/wav;base64,' + btoa(data);
+        if (canBlob) {
+            // so chrome was blowing up, because it just blows up sometimes
+            // if you make dataURIs that are too large, but it lets you make
+            // really large blobs...
+            var view = new Uint8Array(data.length);
+            for (var i = 0; i < view.length; i++) {
+                view[i] = data.charCodeAt(i);
+            }
+            var blob = new Blob([view], {type: 'audio/wav'});
+            return (window.URL || window.webkitURL).createObjectURL(blob);
+        } else {
+            return 'data:audio/wav;base64,' + btoa(data);
+        }
     }
 
     function noteToFreq(stepsFromMiddleC) {

index.html

@@ -56,6 +56,8 @@ <h2>HTML5 Javascript Piano</h2>
                     – May 16, 2012
                 </p>
             </div>
+            <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://mrcoles.com/piano/" data-text="HTML5 Piano - with a data URI synth" data-via="lethys">Tweet</a>
+<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
         </div>
         <script src="jquery-1.7.1.min.js"></script>
         <script src="audio.js"></script>

piano.css

@@ -220,6 +220,12 @@ h1 {
     cursor: pointer;
 }
 
+.twitter-share-button {
+    position: absolute;
+    top: 0;
+    right: 0;
+}
+
 #top:hover {
     color: red;
 }

piano.js

@@ -79,7 +79,7 @@
 
         // delayed for-loop to stop browser from crashing :'(
         // go slower on Chrome...
-        var i = -12, max = 14, addDelay = /Chrome/i.test(navigator.userAgent) ? 100 : 50;
+        var i = -12, max = 14, addDelay = /Chrome/i.test(navigator.userAgent) ? 80 : 0;
         (function go() {
             addKey(i + notesOffset);
             if (++i < max) {