diff --git a/app/assets/javascripts/angular/controllers/annotate.js b/app/assets/javascripts/angular/controllers/annotate.js
deleted file mode 100644
index e69de29b..00000000
diff --git a/app/assets/javascripts/angular/controllers/annotation_viewer.js b/app/assets/javascripts/angular/controllers/annotation_viewer.js
index 2f60f9c5..6e37e1a3 100644
--- a/app/assets/javascripts/angular/controllers/annotation_viewer.js
+++ b/app/assets/javascripts/angular/controllers/annotation_viewer.js
@@ -3,7 +3,9 @@
 /**
  * The listen controller. Show a spectrogram, listen to audio, annotate the spectrogram.
  * @param $scope
- * @param $routeParams
+ * @param $element
+ * @param $attrs
+ * @param $transclude
  * @constructor
  */
 function AnnotationViewerCtrl($scope, $element, $attrs, $transclude) {
@@ -23,12 +25,15 @@ function AnnotationViewerCtrl($scope, $element, $attrs, $transclude) {
         // TODO: these are stubs and will need to be refactored
 
         // constants go here
+        var me = $scope;
 
         return {
-            pixelsToSeconds: function pixelsToSeconds(value) {
-                return value * 10;
+            pixelsToSeconds: function pixelsToSeconds(pixels) {
+                var seconds = pixels * pixelsPerSecond;
+                return seconds;
             },
-            pixelsToHertz: function pixelsToHertz(value) {
+            pixelsToHertz: function pixelsToHertz(pixels) {
+                var hertz  = hetz * pixelsPerHertz;
                 return value * 10;
             },
             secondsToPixels: function secondsToPixels(value) {
diff --git a/app/assets/javascripts/angular/controllers/listen.js b/app/assets/javascripts/angular/controllers/listen.js
index d6238389..1cc6a7d6 100644
--- a/app/assets/javascripts/angular/controllers/listen.js
+++ b/app/assets/javascripts/angular/controllers/listen.js
@@ -24,8 +24,15 @@ function ListenCtrl($scope, $resource, $routeParams, Media, AudioEvent, Tag) {
 
         var formatPaths = function () {
             if ($scope.model.media && $scope.model.media.hasOwnProperty('recordingId')) {
-                $scope.model.media.imageUrl = $scope.model.media.spectrogramBaseUrl.format($scope.model.media) + "?" + $scope.authTokenQuery();
-                $scope.model.media.audioUrl = $scope.model.media.audioBaseUrl.format($scope.model.media) + "?" + $scope.authTokenQuery();
+                var authToken = $scope.authTokenQuery();
+                $scope.model.media.imageUrl = $scope.model.media.spectrogramBaseUrl.format($scope.model.media) + "?" + authToken;
+
+                $scope.model.media.audioUrls = [];
+                angular.forEach($scope.model.media.options.audioFormats, function (value, key){
+                    $scope.model.media.audioFormat = value;
+                    this.push($scope.model.media.audioBaseUrl.format($scope.model.media) + "?" + authToken);
+                },$scope.model.media.audioUrls);
+
             }
         };
         $scope.$on('event:auth-loginRequired', formatPaths);
diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
index 1d902ac1..65e87278 100644
--- a/app/assets/stylesheets/application.css.scss
+++ b/app/assets/stylesheets/application.css.scss
@@ -13,6 +13,7 @@
  *= require_tree ../../../vendor/assets/javascripts/.
  *= require_tree ../images/.
  * require_tree .
+ * require_tree bootstrap
  * depend_on "_base"
  */
 
diff --git a/app/assets/templates/listen.html b/app/assets/templates/listen.html
index f34fa8ca..6b18613a 100644
--- a/app/assets/templates/listen.html
+++ b/app/assets/templates/listen.html
@@ -16,7 +16,7 @@ <h3>Spectrogram</h3>
 
         <h3>Audio Controls</h3>
         <audio id="main-player" controls>
-            <source ng-src="{{media.audioUrl}}" src="">
+            <source ng-repeat="url in model.media.audioUrls" ng-src="{{url}}" src="">
             Your browser does not support the audio element.
         </audio>
         <div id="listenEditContainer">
@@ -31,10 +31,10 @@ <h3>
                     <label>
                         <span>Tags</span>
                         <input type="hidden" ng-multiple="true" tags multiple ui-select2="{allowClear:true, tags:tags }"
-                                ng-model="selectedEvent.audioEventTags">
+                                ng-model="selectedEvent.audioEventTags" />
                             <!--<option ng-repeat="t in tags" value="{{t.id}}">{{t.text}} <span> &lt;!&ndash; ng-show={{t.type_of_tag}}&ndash;&gt;,-->
                         <!--{{t.typeOfTag}} &lt;!&ndash; &ndash;&gt;</span></option>-->
-                        </input>
+
                     </label>
                     <label>
                         <span>Duration (seconds)</span></label>
diff --git a/app/controllers/media_controller.rb b/app/controllers/media_controller.rb
index b150056c..9d105b5c 100644
--- a/app/controllers/media_controller.rb
+++ b/app/controllers/media_controller.rb
@@ -115,8 +115,8 @@ def item
           :options              => {
               :colors        => Spectrogram.colour_options,
               :window_size   => Spectrogram.window_options,
-              :audio_formats => audio_media_types.collect { |mt| mt.symbol },
-              :image_formats => image_media_types.collect { |mt| mt.symbol },
+              :audio_formats => audio_media_types.collect { |mt| '.' + mt.symbol.to_s}.uniq,
+              :image_formats => image_media_types.collect { |mt| '.' + mt.symbol.to_s},
           }
       }
 
diff --git a/lib/RestFailureApp.rb b/lib/RestFailureApp.rb
index 3e3adb22..8f460a6a 100644
--- a/lib/RestFailureApp.rb
+++ b/lib/RestFailureApp.rb
@@ -10,6 +10,6 @@ def respond
   def json_failure
     self.status = 401
     self.content_type = 'application/json'
-    self.response_body = "{'error' : 'authentication error'}"
+    self.response_body = '{"error" : "authentication error"}'
   end
 end
\ No newline at end of file