(function() {
    'use strict';

    function SoundVisualizerService() {
        var service = {};
        var audioCtx = null;
        var _stream = null;
        var intv = null;
        service.start = function(){
          navigator.getUserMedia  = navigator.getUserMedia ||
                                  navigator.webkitGetUserMedia ||
                                  navigator.mozGetUserMedia ||
                                  navigator.msGetUserMedia;

          var audio = document.querySelector('audio');

          var errorCallback = function(e) {
            console.log('Reeeejected!', e);
          };

          if (navigator.getUserMedia) {
            navigator.getUserMedia({audio: true}, function(stream) {
              _stream = stream;
              audioCtx = new (window.AudioContext)()
              var source = audioCtx.createMediaStreamSource(_stream);
              var filter = audioCtx.createBiquadFilter();

              var analyser = audioCtx.createAnalyser();
              source.connect(analyser);
              filter.connect(audioCtx.destination);

              var bufferLength = analyser.frequencyBinCount;
              console.log(bufferLength);

              var dataArray = new Uint8Array(bufferLength);

              function draw() {
                analyser.getByteTimeDomainData(dataArray);
                drawCanvas(dataArray,bufferLength);
              };

              intv = setInterval(function(){ draw() }, 1000 / 30);

            }, errorCallback);
          }
      };

      service.stop = function(){
          clearInterval(intv);
          audioCtx.close();
          _stream.getAudioTracks()[0].stop();
      }
      return service;
    }

    function drawCanvas(dataArray,bufferLength){
      var canvas = document.getElementById('visualizer');
      var canvasCtx = canvas.getContext("2d");

      var WIDTH = 300;
      var HEIGHT = 300;

      canvasCtx.fillStyle = 'rgb(242, 242, 242)';
      canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);

      canvasCtx.lineWidth = 2;
      canvasCtx.beginPath();

      var sliceWidth = WIDTH * 1.0 / bufferLength;
      var x = 0;

      for(var i = 0; i < bufferLength; i++) {
        var data = dataArray[i];
        var v = data / 128.0;
        var y = v * HEIGHT/2;

        var r = data + 120 ;
        var g = 255 -  data ;
        var b = data / 3;

        canvasCtx.strokeStyle = 'rgb(' + r + ', ' + g + ', ' + b + ')';

        if(i === 0) {
          canvasCtx.moveTo(x, y);
        } else {
          canvasCtx.lineTo(x, y);
        }

        x += sliceWidth;
      }
      canvasCtx.lineTo(canvas.width, canvas.height/2);
      canvasCtx.stroke();
    }

    angular.module('SmartMirror')
    .factory('SoundVisualizerService', SoundVisualizerService);

}());

@@ -62,24 +62,33 @@
 Service() %7B%0A
+        %0A
         var 
@@ -175,32 +175,1177 @@
 ar intv = null;%0A
+        %0A        function drawCanvas(dataArray,bufferLength)%7B%0A      %0A          var canvas = document.getElementById('visualizer');%0A          var canvasCtx = canvas.getContext(%222d%22);%0A    %0A          var WIDTH = 300;%0A          var HEIGHT = 300;%0A    %0A          canvasCtx.fillStyle = 'rgb(242, 242, 242)';%0A          canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);%0A    %0A          canvasCtx.lineWidth = 2;%0A          canvasCtx.beginPath();%0A    %0A          var sliceWidth = WIDTH * 1.0 / bufferLength;%0A          var x = 0;%0A    %0A          for(var i = 0; i %3C bufferLength; i++) %7B%0A            var data = dataArray%5Bi%5D;%0A            var v = data / 128.0;%0A            var y = v * HEIGHT/2;%0A    %0A            var r = data + 120 ;%0A            var g = 255 -  data ;%0A            var b = data / 3;%0A    %0A            canvasCtx.strokeStyle = 'rgb(' + r + ', ' + g + ', ' + b + ')';%0A    %0A            if(i === 0) %7B%0A              canvasCtx.moveTo(x, y);%0A            %7D else %7B%0A              canvasCtx.lineTo(x, y);%0A            %7D%0A    %0A            x += sliceWidth;%0A          %7D%0A          canvasCtx.lineTo(canvas.width, canvas.height/2);%0A          canvasCtx.stroke();%0A        %7D%0A        %0A
         service.
@@ -2875,1004 +2875,48 @@
     
-function drawCanvas(dataArray,bufferLength)%7B%0A      var canvas = document.getElementById('visualizer');%0A      var canvasCtx = canvas.getContext(%222d%22);%0A%0A      var WIDTH = 300;%0A      var HEIGHT = 300;%0A%0A      canvasCtx.fillStyle = 'rgb(242, 242, 242)';%0A      canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);%0A%0A      canvasCtx.lineWidth = 2;%0A      canvasCtx.beginPath();%0A%0A      var sliceWidth = WIDTH * 1.0 / bufferLength;%0A      var x = 0;%0A%0A      for(var i = 0; i %3C bufferLength; i++) %7B%0A        var data = dataArray%5Bi%5D;%0A        var v = data / 128.0;%0A        var y = v * HEIGHT/2;%0A%0A        var r = data + 120 ;%0A        var g = 255 -  data ;%0A        var b = data / 3;%0A%0A        canvasCtx.strokeStyle = 'rgb(' + r + ', ' + g + ', ' + b + ')';%0A%0A        if(i === 0) %7B%0A          canvasCtx.moveTo(x, y);%0A        %7D else %7B%0A          canvasCtx.lineTo(x, y);%0A        %7D%0A%0A        x += sliceWidth;%0A      %7D%0A      canvasCtx.lineTo(canvas.width, canvas.height/2);%0A      canvasCtx.stroke();%0A    %7D%0A%0A    angular.module('SmartMirror
+%0A%0A    angular.module('soundVisualizerApp
 ')%0A 

Update visualizer.js