enhance and optmize

call cancelAnimationFrame after the sound finished to prevent the
potential memory insrease and reduce the CPU cost

Author: wayou

js/html5_audio_visualizer.js

@@ -21,7 +21,8 @@ var Visualizer = function() {
     this.infoUpdateId = null, //to sotore the setTimeout ID and clear the interval
     this.animationId = null,
     this.status = 0, //flag for sound is playing 1 or stopped 0
-    this.forceStop = false
+    this.forceStop = false,
+    this.allCapsReachBottom = false
 };
 Visualizer.prototype = {
     ini: function() {
@@ -134,8 +135,10 @@ Visualizer.prototype = {
             audioBufferSouceNode.stop = audioBufferSouceNode.noteOff //in old browsers use noteOn method
         };
         //stop the previous sound if any
-        if (this.source !== null) {
+        if (this.animationId !== null) {
             cancelAnimationFrame(this.animationId);
+        }
+        if (this.source !== null) {
             this.source.stop(0);
         }
         audioBufferSouceNode.start(0);
@@ -169,13 +172,24 @@ Visualizer.prototype = {
         var drawMeter = function() {
             var array = new Uint8Array(analyser.frequencyBinCount);
             analyser.getByteFrequencyData(array);
+            if (that.status === 0) {
+                //fix when some sounds end the value still not back to zero
+                for (var i = array.length - 1; i >= 0; i--) {
+                    array[i] = 0;
+                };
+                allCapsReachBottom = true;
+                for (var i = capYPositionArray.length - 1; i >= 0; i--) {
+                    allCapsReachBottom = allCapsReachBottom && (capYPositionArray[i] === 0);
+                };
+                if (allCapsReachBottom) {
+                    cancelAnimationFrame(that.animationId);//since the sound is top and animation finished, stop the requestAnimation to prevent potential memory leak,THIS IS VERY IMPORTANT!
+                    return;
+                };
+            };
             var step = Math.round(array.length / meterNum); //sample limited data from the total array
             ctx.clearRect(0, 0, cwidth, cheight);
             for (var i = 0; i < meterNum; i++) {
                 var value = array[i * step];
-                if (that.status === 0) {
-                    value = 0; //fix when some sounds end the value still not back to zero
-                };
                 if (capYPositionArray.length < Math.round(meterNum)) {
                     capYPositionArray.push(value);
                 };
@@ -190,7 +204,7 @@ Visualizer.prototype = {
                 ctx.fillStyle = gradient; //set the filllStyle to gradient for a better look
                 ctx.fillRect(i * 12 /*meterWidth+gap*/ , cheight - value + capHeight, meterWidth, cheight); //the meter
             }
-            this.animationId = requestAnimationFrame(drawMeter);
+            that.animationId = requestAnimationFrame(drawMeter);
         }
         this.animationId = requestAnimationFrame(drawMeter);
     },
@@ -201,7 +215,6 @@ Visualizer.prototype = {
             return;
         };
         this.status = 0;
-        console.log('audio ended');
         var text = 'HTML5 Audio API showcase | An Audio Viusalizer';
         document.getElementById('fileWrapper').style.opacity = 1;
         document.getElementById('info').innerHTML = text;