diff --git a/app/components/bridge-controls.js b/app/components/bridge-controls.js
index e3faffb..6f412e1 100644
--- a/app/components/bridge-controls.js
+++ b/app/components/bridge-controls.js
@@ -17,27 +17,27 @@ export default Em.Component.extend({
   appSettingsDisplayed: false,
 
   actions: {
-    changeTab: function(tabName){
+    changeTab(tabName){
       var index = this.get('tabList').indexOf(tabName);
       this.set('selectedTab', index);
       localStorage.setItem('huegasm.selectedTab', index);
     },
 
-    toggleGroupControl: function(){
+    toggleGroupControl(){
       this.toggleProperty('groupControlDisplayed');
     },
 
-    toggleAppSettings: function(){
+    toggleAppSettings(){
       this.toggleProperty('appSettingsDisplayed');
     },
 
-    clearBridge: function() {
+    clearBridge() {
       delete localStorage['huegasm.bridgeUsername'];
       delete localStorage['huegasm.bridgeIp'];
       location.reload();
     },
 
-    clearAllSettings: function() {
+    clearAllSettings() {
       localStorage.clear();
       location.reload();
     }
@@ -47,7 +47,7 @@ export default Em.Component.extend({
       return 'http://' + this.get('bridgeIp') + '/api/' + this.get('bridgeUsername');
   }.property('bridgeIp', 'bridgeUsername'),
 
-  didInsertElement: function(){
+  didInsertElement(){
     // here's a weird way to automatically initialize bootstrap tooltips
     var self = this, observer = new MutationObserver(function(mutations) {
       var haveTooltip = !mutations.every(function(mutation) {
@@ -75,7 +75,7 @@ export default Em.Component.extend({
     });
   },
 
-  init: function() {
+  init() {
     this._super();
 
     if(!this.get('trial')) {
@@ -95,7 +95,7 @@ export default Em.Component.extend({
     }
   }.observes('updateGroupsData'),
 
-  doUpdateGroupsData: function(){
+  doUpdateGroupsData(){
     var self = this;
 
     Em.$.get(this.get('apiURL') + '/groups', function (result, status) {
@@ -128,7 +128,7 @@ export default Em.Component.extend({
   lightsTabSelected: Em.computed.equal('selectedTab', 0),
   musicTabSelected: Em.computed.equal('selectedTab', 1),
 
-  updateLightData: function(){
+  updateLightData(){
     var self = this, fail = function() {
       clearInterval(self.get('lightsDataIntervalHandle'));
       self.setProperties({
diff --git a/app/components/bridge-finder.js b/app/components/bridge-finder.js
index 0fbdeb3..9a3e463 100644
--- a/app/components/bridge-finder.js
+++ b/app/components/bridge-finder.js
@@ -25,11 +25,11 @@ export default Em.Component.extend({
   multipleBridgeIps: [],
 
   actions: {
-    retry: function(){
+    retry(){
       this.onBridgeIpChange();
     },
 
-    findBridgeByIp: function() {
+    findBridgeByIp() {
       var manualBridgeIp = this.get('manualBridgeIp'), self = this;
 
       if (manualBridgeIp.toLowerCase() === 'trial') {
@@ -53,7 +53,7 @@ export default Em.Component.extend({
     }
   },
 
-  didInsertElement: function() {
+  didInsertElement() {
     var self = this;
 
     Em.$(document).keypress(function(event) {
@@ -64,7 +64,7 @@ export default Em.Component.extend({
   },
 
   // find the bridge ip here
-  init: function () {
+  init() {
     this._super();
 
     if(this.get('bridgeIp') === null){
@@ -104,7 +104,7 @@ export default Em.Component.extend({
     }
   }.observes('bridgeIp'),
 
-  pingBridgeUser: function () {
+  pingBridgeUser() {
     var bridgeIp = this.get('bridgeIp'), self = this, bridgeUserNamePingIntervalProgress = this.get('bridgeUserNamePingIntervalProgress'),
       bridgeUsernamePingMaxTime = this.get('bridgeUsernamePingMaxTime');
 
diff --git a/app/components/color-picker.js b/app/components/color-picker.js
index 6a3298c..8e720d8 100644
--- a/app/components/color-picker.js
+++ b/app/components/color-picker.js
@@ -9,7 +9,7 @@ export default Em.Component.extend({
   canvasContext: null,
 
   actions: {
-    colorSelect: function() {
+    colorSelect() {
       var canvasOffset = Em.$(this.get('canvas')).offset();
       var canvasX = Math.floor(event.pageX - canvasOffset.left), canvasY = Math.floor(event.pageY - canvasOffset.top);
 
@@ -24,7 +24,7 @@ export default Em.Component.extend({
   },
 
   // https://dzone.com/articles/creating-your-own-html5
-  didInsertElement: function(){
+  didInsertElement(){
     // handle color changes
     var canvas = Em.$('#picker')[0],
       canvasContext = canvas.getContext('2d'),
diff --git a/app/components/controls/group-control.js b/app/components/controls/group-control.js
index 6637100..2d76cc3 100644
--- a/app/components/controls/group-control.js
+++ b/app/components/controls/group-control.js
@@ -9,17 +9,17 @@ export default Em.Component.extend({
   groupIdSelection: null,
 
   actions: {
-    selectGroup: function(selection){
+    selectGroup(selection){
       this.set('groupIdSelection', selection);
     },
-    toggleConfirmDeleteGroupsModal: function(groupName, groupId){
+    toggleConfirmDeleteGroupsModal(groupName, groupId){
       this.setProperties({
         deleteGroupName: groupName,
         deleteGroupId: groupId
       });
       this.toggleProperty('isShowingConfirmDeleteModal');
     },
-    toggleAddGroupsModal: function(){
+    toggleAddGroupsModal(){
       this.toggleProperty('isShowingAddGroupsModal');
     }
   },
@@ -66,7 +66,7 @@ export default Em.Component.extend({
     }
   }.observes('groupIdSelection', 'groupsArrData'),
 
-  didInsertElement: function(){
+  didInsertElement(){
     var selectGroup = '0', storageItem = localStorage.getItem('huegasm.selectedGroup');
 
     if(storageItem){
diff --git a/app/components/controls/light-control.js b/app/components/controls/light-control.js
index 7fca415..4832c05 100644
--- a/app/components/controls/light-control.js
+++ b/app/components/controls/light-control.js
@@ -13,7 +13,7 @@ export default Em.Component.extend({
   colorPickerDisplayed: false,
 
   actions: {
-    clickLight: function(light){
+    clickLight(light){
       var activeLights = this.get('activeLights'),
         lightId = activeLights.indexOf(light);
 
@@ -23,12 +23,12 @@ export default Em.Component.extend({
         activeLights.pushObject(light);
       }
     },
-    toggleColorpicker: function() {
+    toggleColorpicker() {
       this.toggleProperty('colorPickerDisplayed');
     }
   },
 
-  didInsertElement: function() {
+  didInsertElement() {
     var self = this;
     // TODO remove debug
     this.xyToRgb(0.5,0.5);
@@ -223,7 +223,7 @@ export default Em.Component.extend({
     }
   }.observes('strobeOn'),
 
-  strobeStep: function () {
+  strobeStep() {
     var lastStrobeLight = (this.get('lastStrobeLight') + 1) % (this.get('activeLights').length + 1), self = this;
 
     Em.$.ajax(this.get('apiURL') + '/lights/' + lastStrobeLight + '/state', {
@@ -246,7 +246,7 @@ export default Em.Component.extend({
 
   // **************** STROBE LIGHT FINISH ****************
   // http://www.developers.meethue.com/documentation/color-conversions-rgb-xy
-  rgbToXy: function(red, green, blue){
+  rgbToXy(red, green, blue){
     var X, Y, Z, x, y;
 
     // normalize
@@ -270,7 +270,7 @@ export default Em.Component.extend({
     return [x,y];
   },
 
-  xyToRgb: function(x, y){
+  xyToRgb(x, y){
     var r, g, b, X, Y = 1.0, Z;
 
     X = (Y / y) * x;
diff --git a/app/components/controls/music-control.js b/app/components/controls/music-control.js
index 0f1b7e8..a7414e8 100644
--- a/app/components/controls/music-control.js
+++ b/app/components/controls/music-control.js
@@ -14,28 +14,24 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
   }.observes('active'),
 
   actions: {
-    useMic: function() {
+    useMic() {
       var usingMic = this.get('usingMic');
-      this.changePlayerControl('usingMic', !usingMic);
 
       if(!usingMic){
-        navigator.getUserMedia(
-          {audio: true},
-          function(stream) {
-            debugger;
-          },
-          function(err) {
-            console.log("Error during navigator.getUserMedia: " + err);
-          }
-        );
+        this.startUsingMic(!usingMic);
+      } else {
+        this.changePlayerControl('usingMic', !usingMic);
+        if(this.get('playQueuePointer') !== -1) {
+          this.send('goToSong',this.get('playQueuePointer'));
+        }
       }
     },
-    slideTogglePlayerBottom: function(){
+    slideTogglePlayerBottom(){
       this.changePlayerControl('playerBottomDisplayed', !this.get('playerBottomDisplayed'));
     },
-    saveSongSettings: function() {
+    saveSongSettings() {
     },
-    goToSong: function(index){
+    goToSong(index){
       var dancer = this.get('dancer'), audio = new Audio();
       audio.src = this.get('playQueue')[index].url;
 
@@ -51,14 +47,14 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
 
       this.send('play');
     },
-    removeAudio: function(index){
+    removeAudio(index){
       if(index === this.get('playQueuePointer')) {
         this.clearCurrentAudio(true);
       }
 
       this.get('playQueue').removeAt(index);
     },
-    defaultControls: function(){
+    defaultControls(){
       var beatOptions = this.get('beatOptions');
 
       this.changePlayerControl('threshold', beatOptions.threshold.defaultValue, true);
@@ -66,14 +62,14 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
       this.changePlayerControl('frequency', beatOptions.frequency.defaultValue, true);
       this.changePlayerControl('transitionTime', beatOptions.transitionTime.defaultValue, true);
     },
-    playerAreaPlay: function(){
+    playerAreaPlay(){
       if(Em.isEmpty(Em.$('#playerControls:hover'))){
         this.send('play');
         this.set('fadeOutNotification', true);
         Em.$('#playNotification').removeClass('fadeOut').prop('offsetWidth', Em.$('#playNotification').prop('offsetWidth')).addClass('fadeOut');
       }
     },
-    play: function () {
+    play() {
       var dancer = this.get('dancer');
 
       if(this.get('playQueuePointer') !== -1 ) {
@@ -95,13 +91,13 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
         }
       }
     },
-    volumeChanged: function (value) {
+    volumeChanged(value) {
       this.changePlayerControl('volume', value);
       if(this.get('playing')) {
         this.get('dancer').setVolume(value/100);
       }
     },
-    next: function () {
+    next() {
       var playQueuePointer = this.get('playQueuePointer'), playQueueLength = this.get('playQueue.length');
       var nextSong = (playQueuePointer + 1);
 
@@ -111,7 +107,7 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
         this.send('goToSong', nextSong);
       }
     },
-    previous: function () {
+    previous() {
       if(this.get('timeElapsed') > 5) {
         this.send('seekChanged', 0);
       } else {
@@ -125,11 +121,11 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
         this.send('goToSong', nextSong);
       }
     },
-    toggleVisualizations: function() {
+    toggleVisualizations() {
       this.toggleProperty('visualizationsDisplayed');
     },
-    fullscreen: function () {},
-    seekChanged: function (position) {
+    fullscreen() {},
+    seekChanged(position) {
       var dancer = this.get('dancer');
 
       if(dancer.audio){
@@ -138,7 +134,7 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
         this.set('timeElapsed', audioPosition);
       }
     },
-    volumeMutedChanged: function (value) {
+    volumeMutedChanged(value) {
       var dancer = this.get('dancer'),
         volumeMuted = Em.isNone(value) ? !this.get('volumeMuted') : value;
 
@@ -152,62 +148,66 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
         }
       }
     },
-    shuffleChanged: function (value) {
+    shuffleChanged(value) {
       this.changePlayerControl('shuffle', Em.isNone(value) ? !this.get('shuffle') : value);
     },
-    repeatChanged: function (value) {
+    repeatChanged(value) {
       this.changePlayerControl('repeat', Em.isNone(value) ? (this.get('repeat') + 1) % 3 : value);
     },
-    thresholdChanged: function(value) {
+    thresholdChanged(value) {
       this.changePlayerControl('threshold', value, true);
     },
-    transitionTimeChanged: function(value) {
+    transitionTimeChanged(value) {
       this.changePlayerControl('transitionTime', value);
     },
-    playerBottomDisplayedChanged: function(value) {
+    playerBottomDisplayedChanged(value) {
       this.changePlayerControl('playerBottomDisplayed', value);
     },
-    decayChanged: function(value){
+    decayChanged(value){
       this.changePlayerControl('decay', value, true);
     },
-    frequencyChanged: function(value){
+    frequencyChanged(value){
       this.changePlayerControl('frequency', value, true);
     },
     addAudio: function () {
       Em.$('#fileInput').click();
     },
-    playListAreaAddAudio: function(){
+    playListAreaAddAudio(){
       this.send('addAudio');
     },
-    speakerViewedChanged: function(value){
+    speakerViewedChanged(value){
       this.set('speakerViewed', value);
     },
-    randomTransitionChanged: function(value){
+    randomTransitionChanged(value){
       this.set('randomTransition', value);
     },
-    onBeatBriAndColorChanged: function(value){
+    onBeatBriAndColorChanged(value){
       this.set('onBeatBriAndColor', value);
     },
-    usingMicChanged: function(value){
-      this.set('usingMic', value);
+    usingMicChanged(value){
+      if(value) {
+        this.startUsingMic(value);
+      } else {
+        this.set('usingMic', value);
+      }
     },
-    clickSpeaker: function(){
+    clickSpeaker(){
       this.simulateKick(1);
     },
-    dropFiles: function(){
+    dropFiles(){
       this.setProperties({
         dragging: false,
         draggingOverPlayListArea: false
       });
       this.send('handleNewFiles', event.dataTransfer.files);
     },
-    playListAreaDragOver: function(){
+    playListAreaDragOver(){
       this.set('draggingOverPlayListArea', true);
     },
-    playListAreaDragLeave: function(){
+    playListAreaDragLeave(){
       this.set('draggingOverPlayListArea', false);
     },
-    handleNewFiles: function(files){
+    handleNewFiles(files){
       var self = this,
         playQueue = this.get('playQueue'),
         updatePlayQueue = function(){
@@ -237,6 +237,32 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
     }
   },
 
+  startUsingMic(value) {
+    navigator.getUserMedia(
+      {audio: true},
+      (stream) => {
+        this.changePlayerControl('usingMic', value);
+        var audio = new Audio(), dancer = this.get('dancer');
+
+        audio.src = window.URL.createObjectURL(stream);
+
+        if(dancer.audio) {
+          dancer.pause();
+          clearInterval(this.get('incrementElapseTimeHandle'));
+
+          this.set('playing', false);
+        }
+
+        dancer.load(audio);
+
+        this.send('play');
+      },
+      function(err) {
+        console.log('Error during navigator.getUserMedia: ' + err.name + ', ' + err.message + ', ' + err.constraintName);
+      }
+    );
+  },
+
   updatePageTitle: function(){
     var title = 'Huegasm', playQueuePointer = this.get('playQueuePointer'), playQueue = this.get('playQueue');
 
@@ -258,7 +284,7 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
     document.title = title;
   }.observes('playQueuePointer'),
 
-  clearCurrentAudio: function(resetPointer) {
+  clearCurrentAudio(resetPointer) {
     var dancer = this.get('dancer');
 
     dancer.pause();
@@ -275,7 +301,7 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
     });
   },
 
-  goToNextSong: function() {
+  goToNextSong() {
     this.get('beatHistory').clear();
 
     if(this.get('repeat') === 2){
@@ -286,7 +312,7 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
     }
   },
 
-  dragOver: function() {
+  dragOver() {
     var dragLeaveTimeoutHandle = this.get('dragLeaveTimeoutHandle');
     this.set('dragging', true);
 
@@ -295,13 +321,13 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
     }
   },
 
-  dragLeave: function(){
+  dragLeave(){
     // need to delay the dragLeave notification to avoid flickering ( hovering over some page elements causes this event to be sent )
     var self = this;
     this.set('dragLeaveTimeoutHandle', setTimeout(function(){ self.set('dragging', false); }, 500));
   },
 
-  simulateKick: function(mag) {
+  simulateKick(mag) {
     var activeLights = this.get('activeLights'),
       transitionTime = this.get('transitionTime') * 10,
       onBeatBriAndColor = this.get('onBeatBriAndColor'),
@@ -362,7 +388,7 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
     }
   },
 
-  init: function () {
+  init() {
     this._super();
 
     var dancer = new Dancer(),
@@ -392,6 +418,12 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
       kick: kick
     });
 
+    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
+
+    if(navigator.getUserMedia === undefined){
+      this.set('usingMicSupported', false);
+    }
+
     ['volume', 'shuffle', 'repeat', 'volumeMuted', 'threshold', 'decay', 'frequency', 'speakerViewed', 'transitionTime', 'randomTransition', 'playerBottomDisplayed', 'onBeatBriAndColor', 'usingMic'].forEach(function (item) {
       if (localStorage.getItem('huegasm.' + item)) {
         var itemVal = localStorage.getItem('huegasm.' + item);
@@ -406,15 +438,9 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
         self.send(item+'Changed', itemVal);
       }
     });
-
-    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
-
-    if(navigator.getUserMedia === undefined){
-      this.set('usingMicSupported', false);
-    }
   },
 
-  didInsertElement: function () {
+  didInsertElement() {
     var self = this;
 
     Em.$('#fileInput').on('change', function () {
diff --git a/app/components/huegasm-app.js b/app/components/huegasm-app.js
index e20701b..80efba0 100644
--- a/app/components/huegasm-app.js
+++ b/app/components/huegasm-app.js
@@ -7,7 +7,7 @@ export default Em.Component.extend({
 
   trial: false,
 
-  init: function(){
+  init(){
     this._super();
 
     if(localStorage.getItem('huegasm.bridgeIp')){
diff --git a/app/components/light-group.js b/app/components/light-group.js
index 48f694f..0ee6a9f 100644
--- a/app/components/light-group.js
+++ b/app/components/light-group.js
@@ -9,10 +9,10 @@ export default Em.Component.extend({
   lightsList: Em.A(),
 
   actions: {
-    clickLight: function(id, data){
+    clickLight(id, data){
       this.sendAction('action', id, data);
     },
-    lightStartHover: function(id){
+    lightStartHover(id){
       var hoveredLight = this.get('lightsList').filter(function(light){
         return light.activeClass !== 'unreachable' && light.id === id[0];
       });
@@ -27,7 +27,7 @@ export default Em.Component.extend({
 
       this.set('isHovering', true);
     },
-    lightStopHover: function(id){
+    lightStopHover(id){
       var hoveredLight = this.get('lightsList').filter(function(light){
         return light.activeClass !== 'unreachable' && light.id === id[0];
       });
@@ -44,7 +44,7 @@ export default Em.Component.extend({
     }
   },
 
-  didInsertElement: function() {
+  didInsertElement() {
     if(this.get('lightsData')){
       this.onLightsDataChange();
     }
diff --git a/app/components/mixins/music-control.js b/app/components/mixins/music-control.js
index 1b7a5bc..a7b9d35 100644
--- a/app/components/mixins/music-control.js
+++ b/app/components/mixins/music-control.js
@@ -139,7 +139,7 @@ export default Em.Mixin.create({
     }
   }.property('onBeatBriAndColor'),
 
-  changePlayerControl: function(name, value, isOption){
+  changePlayerControl(name, value, isOption){
     if(isOption){
       var options = {};
       options[name] = value;
@@ -151,7 +151,7 @@ export default Em.Mixin.create({
   },
 
   incrementElapseTimeHandle: null,
-  incrementElapseTime: function(){
+  incrementElapseTime(){
     this.incrementProperty('timeElapsed');
     if(this.get('timeElapsed') > this.get('timeTotal')){
       this.goToNextSong();
@@ -304,7 +304,7 @@ export default Em.Mixin.create({
     this.changeTooltipText(type, tooltipTxt);
   }.observes('playing').on('init'),
 
-  changeTooltipText: function (type, text) {
+  changeTooltipText(type, text) {
     // change the tooltip text if it's already visible
     Em.$('#' + type + 'Tooltip + .tooltip .tooltip-inner').html(text);
     //change the tooltip text for hover
@@ -331,9 +331,9 @@ export default Em.Mixin.create({
     return this.formatTime(this.get('timeTotal'));
   }.property('timeTotal'),
 
-  formatTime: function(time){
+  formatTime(time){
     return this.pad(Math.floor(time/60), 2) + ':' + this.pad(time%60, 2);
   },
 
-  pad: function(num, size){ return ('000000000' + num).substr(-size); }
+  pad(num, size){ return ('000000000' + num).substr(-size); }
 });
diff --git a/app/styles/app.scss b/app/styles/app.scss
index f866484..d67763b 100644
--- a/app/styles/app.scss
+++ b/app/styles/app.scss
@@ -574,12 +574,13 @@ md-switch.md-default-theme.md-checked .md-thumb {
 }
 
 #playListControls {
+  min-height: 35px;
   margin-top: 10px;
   padding-bottom: 10px;
   border-bottom: 1px solid #3a3a3a;
 }
 
-#playListArea {
+#playListArea, #playAreaMic {
   background-color: lighten($playListBackgroundColor, 20%);
   width: 100%;
   height: 333px;
@@ -595,7 +596,7 @@ md-switch.md-default-theme.md-checked .md-thumb {
     text-align: center;
     width: 100%;
   }
-  .library-music {
+  .library-music, .mic {
     position: absolute;
     top: 40%;
     font-size: 100px;
@@ -603,6 +604,10 @@ md-switch.md-default-theme.md-checked .md-thumb {
     width: 100%;
     text-align: center;
   }
+  .mic {
+    top: 30%;
+    font-size: 120px;
+  }
 }
 
 .songArtist {
diff --git a/app/templates/components/controls/music-control.hbs b/app/templates/components/controls/music-control.hbs
index b7a866d..89febf2 100644
--- a/app/templates/components/controls/music-control.hbs
+++ b/app/templates/components/controls/music-control.hbs
@@ -1,6 +1,5 @@
 <div class="row">
   <div id="playerArea" class="col-sm-8 col-xs-12" {{action "playerAreaPlay"}}>
-
     <div id="playNotification"
          class="material-icons {{if fadeOutNotification "fadeOut"}} {{if playing "play-arrow" "pause"}}"></div>
     <div id="playerControls">
@@ -26,11 +25,9 @@
     {{/if}}
 
           <span class="pull-right">
-            <span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip"
-                  data-title="Visualizations" {{action "toggleVisualizations"}}>{{paper-icon icon="remove-red-eye"  class="playerControllIcon"}}
+            <span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip" data-title="Visualizations" {{action "toggleVisualizations"}}>{{paper-icon icon="remove-red-eye"  class="playerControllIcon"}}
             </span>
-            <span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip"
-                  data-title="Full screen" {{action "fullscreen"}}>{{paper-icon icon="fullscreen"  class="playerControllIcon"}}
+            <span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip" data-title="Full screen" {{action "fullscreen"}}>{{paper-icon icon="fullscreen"  class="playerControllIcon"}}
             </span>
           </span>
     </div>
@@ -40,44 +37,49 @@
     <input id="fileInput" type="file" accept="audio/*" multiple="true" />
 
     <div id="playListControls">
-      <span data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip" id="shuffleTooltip" data-title={{shuffleTooltipTxt}} {{action "shuffleChanged"}}>{{paper-icon icon="shuffle" class=shuffleClass}}</span>
-
-      <span data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip" id="repeatTooltip" data-title={{repeatTooltipTxt}} {{action "repeatChanged"}}>{{paper-icon icon=repeatIcon class=repeatClass}}</span>
-
-      <span data-toggle="tooltip" data-placement="bottom auto" data-title="Add new music" class="pull-right bootstrapTooltip" {{action "addAudio"}}>{{paper-icon icon="add" class="playerControllIcon"}}</span>
+      {{#if notUsingMic}}
+        <span data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip" id="shuffleTooltip" data-title={{shuffleTooltipTxt}} {{action "shuffleChanged"}}>{{paper-icon icon="shuffle" class=shuffleClass}}</span>
+        <span data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip" id="repeatTooltip" data-title={{repeatTooltipTxt}} {{action "repeatChanged"}}>{{paper-icon icon=repeatIcon class=repeatClass}}</span>
+      {{/if}}
 
       {{#if usingMicSupported}}
           <span data-toggle="tooltip" data-placement="bottom auto" class="pull-right bootstrapTooltip" id="usingMicTooltip" data-title={{usingMicTooltipTxt}} {{action "useMic"}}>{{paper-icon icon=micIcon class=usingMicClass}}</span>
       {{/if}}
+
+      {{#if notUsingMic}}<span data-toggle="tooltip" data-placement="bottom auto" data-title="Add new music" class="pull-right bootstrapTooltip" {{action "addAudio"}}>{{paper-icon icon="add" class="playerControllIcon"}}</span>{{/if}}
     </div>
 
-    <div id="playListArea"
-         class={{playListAreaClass}} {{action "playListAreaAddAudio"}} {{action "playListAreaDragOver" on="dragOver"}} {{action "playListAreaDragLeave" on="dragLeave"}} {{action "dropFiles" on="drop"}}>
-      {{#if (or playQueueEmpty dragging)}}
-        <div id="dragHere">
-          {{#if dragging}}
-            Drag your music files here
-          {{else}}
-            Add your music files here
-          {{/if}}
-        </div>
-        {{paper-icon icon="library-music"}}
-      {{/if}}
+    {{#if usingMic}}
+      <div id="playAreaMic">
+        {{paper-icon icon="mic"}}
+      </div>
+    {{else}}
+      <div id="playListArea"
+           class={{playListAreaClass}} {{action "playListAreaAddAudio"}} {{action "playListAreaDragOver" on="dragOver"}} {{action "playListAreaDragLeave" on="dragLeave"}} {{action "dropFiles" on="drop"}}>
+        {{#if (or playQueueEmpty dragging)}}
+          <div id="dragHere">
+            {{#if dragging}}
+              Drag your music files here
+            {{else}}
+              Add your music files here
+            {{/if}}
+          </div>
+          {{paper-icon icon="library-music"}}
+        {{/if}}
 
-      {{#each playQueue as |item index|}}
-        <div
-          class="playlistItem cursorPointer {{if (eq index playQueuePointer) "active"}} {{if dragging "hidden"}}" {{action "goToSong" index bubbles=false}}>
-          {{#if item.title}}
-            {{item.title}}
-            <div class="songArtist">{{item.artist}}</div>
-          {{else}}
-            {{item.filename}}
-          {{/if}}
-          <div data-toggle="tooltip" data-placement="bottom auto" data-title="Remove from playlist"
-               class="audioRemoveButton cursorPointer bootstrapTooltip" {{action "removeAudio" index bubbles=false}}>{{paper-icon icon="close"}}</div>
-        </div>
-      {{/each}}
-    </div>
+        {{#each playQueue as |item index|}}
+          <div class="playlistItem cursorPointer {{if (eq index playQueuePointer) "active"}} {{if dragging "hidden"}}" {{action "goToSong" index bubbles=false}}>
+            {{#if item.title}}
+              {{item.title}}
+              <div class="songArtist">{{item.artist}}</div>
+            {{else}}
+              {{item.filename}}
+            {{/if}}
+            <div data-toggle="tooltip" data-placement="bottom auto" data-title="Remove from playlist" class="audioRemoveButton cursorPointer bootstrapTooltip" {{action "removeAudio" index bubbles=false}}>{{paper-icon icon="close"}}</div>
+          </div>
+        {{/each}}
+      </div>
+    {{/if}}
   </div>
 </div>
 
diff --git a/package.json b/package.json
index 8ff6fff..16f097a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "huegasm",
-  "version": "0.0.0",
+  "version": "1.0.0",
   "description": "Small description for huegasm goes here",
   "private": true,
   "directories": {
diff --git a/vendor/dancer.js b/vendor/dancer.js
index 875d14a..b97144c 100644
--- a/vendor/dancer.js
+++ b/vendor/dancer.js
@@ -224,9 +224,7 @@
       return 'webaudio';
     } else if ( audioEl && audioEl.mozSetup ) {
       return 'audiodata';
-    } else if ( FlashDetect.versionAtLeast( 9 ) ) {
-      return 'flash';
-    } else {
+    }  else {
       return '';
     }
   };
@@ -407,7 +405,7 @@
       }
 
       this.audio.addEventListener( 'progress', function ( e ) {
-        if ( e.currentTarget.duration ) {
+        if ( e.currentTarget.duration && e.currentTarget.duration !== Infinity ) {
           _this.progress = e.currentTarget.seekable.end( 0 ) / e.currentTarget.duration;
         }
       });
@@ -913,204 +911,3 @@ FFT.prototype.forward = function(buffer) {
 
   return this.calculateSpectrum();
 };
-
-/*
-Copyright (c) Copyright (c) 2007, Carl S. Yestrau All rights reserved.
-Code licensed under the BSD License: http://www.featureblend.com/license.txt
-Version: 1.0.4
-*/
-var FlashDetect = new function(){
-    var self = this;
-    self.installed = false;
-    self.raw = "";
-    self.major = -1;
-    self.minor = -1;
-    self.revision = -1;
-    self.revisionStr = "";
-    var activeXDetectRules = [
-        {
-            "name":"ShockwaveFlash.ShockwaveFlash.7",
-            "version":function(obj){
-                return getActiveXVersion(obj);
-            }
-        },
-        {
-            "name":"ShockwaveFlash.ShockwaveFlash.6",
-            "version":function(obj){
-                var version = "6,0,21";
-                try{
-                    obj.AllowScriptAccess = "always";
-                    version = getActiveXVersion(obj);
-                }catch(err){}
-                return version;
-            }
-        },
-        {
-            "name":"ShockwaveFlash.ShockwaveFlash",
-            "version":function(obj){
-                return getActiveXVersion(obj);
-            }
-        }
-    ];
-    /**
-     * Extract the ActiveX version of the plugin.
-     *
-     * @param {Object} The flash ActiveX object.
-     * @type String
-     */
-    var getActiveXVersion = function(activeXObj){
-        var version = -1;
-        try{
-            version = activeXObj.GetVariable("$version");
-        }catch(err){}
-        return version;
-    };
-    /**
-     * Try and retrieve an ActiveX object having a specified name.
-     *
-     * @param {String} name The ActiveX object name lookup.
-     * @return One of ActiveX object or a simple object having an attribute of activeXError with a value of true.
-     * @type Object
-     */
-    var getActiveXObject = function(name){
-        var obj = -1;
-        try{
-            obj = new ActiveXObject(name);
-        }catch(err){
-            obj = {activeXError:true};
-        }
-        return obj;
-    };
-    /**
-     * Parse an ActiveX $version string into an object.
-     *
-     * @param {String} str The ActiveX Object GetVariable($version) return value.
-     * @return An object having raw, major, minor, revision and revisionStr attributes.
-     * @type Object
-     */
-    var parseActiveXVersion = function(str){
-        var versionArray = str.split(",");//replace with regex
-        return {
-            "raw":str,
-            "major":parseInt(versionArray[0].split(" ")[1], 10),
-            "minor":parseInt(versionArray[1], 10),
-            "revision":parseInt(versionArray[2], 10),
-            "revisionStr":versionArray[2]
-        };
-    };
-    /**
-     * Parse a standard enabledPlugin.description into an object.
-     *
-     * @param {String} str The enabledPlugin.description value.
-     * @return An object having raw, major, minor, revision and revisionStr attributes.
-     * @type Object
-     */
-    var parseStandardVersion = function(str){
-        var descParts = str.split(/ +/);
-        var majorMinor = descParts[2].split(/\./);
-        var revisionStr = descParts[3];
-        return {
-            "raw":str,
-            "major":parseInt(majorMinor[0], 10),
-            "minor":parseInt(majorMinor[1], 10),
-            "revisionStr":revisionStr,
-            "revision":parseRevisionStrToInt(revisionStr)
-        };
-    };
-    /**
-     * Parse the plugin revision string into an integer.
-     *
-     * @param {String} The revision in string format.
-     * @type Number
-     */
-    var parseRevisionStrToInt = function(str){
-        return parseInt(str.replace(/[a-zA-Z]/g, ""), 10) || self.revision;
-    };
-    /**
-     * Is the major version greater than or equal to a specified version.
-     *
-     * @param {Number} version The minimum required major version.
-     * @type Boolean
-     */
-    self.majorAtLeast = function(version){
-        return self.major >= version;
-    };
-    /**
-     * Is the minor version greater than or equal to a specified version.
-     *
-     * @param {Number} version The minimum required minor version.
-     * @type Boolean
-     */
-    self.minorAtLeast = function(version){
-        return self.minor >= version;
-    };
-    /**
-     * Is the revision version greater than or equal to a specified version.
-     *
-     * @param {Number} version The minimum required revision version.
-     * @type Boolean
-     */
-    self.revisionAtLeast = function(version){
-        return self.revision >= version;
-    };
-    /**
-     * Is the version greater than or equal to a specified major, minor and revision.
-     *
-     * @param {Number} major The minimum required major version.
-     * @param {Number} (Optional) minor The minimum required minor version.
-     * @param {Number} (Optional) revision The minimum required revision version.
-     * @type Boolean
-     */
-    self.versionAtLeast = function(major){
-        var properties = [self.major, self.minor, self.revision];
-        var len = Math.min(properties.length, arguments.length);
-        for(i=0; i<len; i++){
-            if(properties[i]>=arguments[i]){
-                if(i+1<len && properties[i]==arguments[i]){
-                    continue;
-                }else{
-                    return true;
-                }
-            }else{
-                return false;
-            }
-        }
-    };
-    /**
-     * Constructor, sets raw, major, minor, revisionStr, revision and installed public properties.
-     */
-    self.FlashDetect = function(){
-        if(navigator.plugins && navigator.plugins.length>0){
-            var type = 'application/x-shockwave-flash';
-            var mimeTypes = navigator.mimeTypes;
-            if(mimeTypes && mimeTypes[type] && mimeTypes[type].enabledPlugin && mimeTypes[type].enabledPlugin.description){
-                var version = mimeTypes[type].enabledPlugin.description;
-                var versionObj = parseStandardVersion(version);
-                self.raw = versionObj.raw;
-                self.major = versionObj.major;
-                self.minor = versionObj.minor;
-                self.revisionStr = versionObj.revisionStr;
-                self.revision = versionObj.revision;
-                self.installed = true;
-            }
-        }else if(navigator.appVersion.indexOf("Mac")==-1 && window.execScript){
-            var version = -1;
-            for(var i=0; i<activeXDetectRules.length && version==-1; i++){
-                var obj = getActiveXObject(activeXDetectRules[i].name);
-                if(!obj.activeXError){
-                    self.installed = true;
-                    version = activeXDetectRules[i].version(obj);
-                    if(version!=-1){
-                        var versionObj = parseActiveXVersion(version);
-                        self.raw = versionObj.raw;
-                        self.major = versionObj.major;
-                        self.minor = versionObj.minor;
-                        self.revision = versionObj.revision;
-                        self.revisionStr = versionObj.revisionStr;
-                    }
-                }
-            }
-        }
-    }();
-};
-FlashDetect.JS_RELEASE = "1.0.4";