diff --git a/web/app/assets/images/content/icon_pausebutton.png b/web/app/assets/images/content/icon_pausebutton.png
index 0df0af051..3dcd6420f 100644
Binary files a/web/app/assets/images/content/icon_pausebutton.png and b/web/app/assets/images/content/icon_pausebutton.png differ
diff --git a/web/app/views/music_sessions/show.html.erb b/web/app/views/music_sessions/show.html.erb
index 090463280..09649dcd5 100644
--- a/web/app/views/music_sessions/show.html.erb
+++ b/web/app/views/music_sessions/show.html.erb
@@ -114,32 +114,30 @@
           var showMusicSession = new JK.ShowMusicSession(JK.app);
           showMusicSession.initialize("<%= @music_session.id %>");
 
-            // remainder of this code is related to playing/pausing the session
+          // remainder of this code is related to playing/pausing the session
           var htmlAudio = $(".recording-controls").find('audio').get(0);
+          var $imgPlayPauseSelector = $("#imgPlayPause");
+          var playButtonPath = '/assets/content/icon_playbutton.png';
+          var pauseButtonPath = '/assets/content/icon_pausebutton.png';
 
-          function formatTime(time) {
-            var minutes = Math.floor(time / 60);
-            var seconds = Math.floor(time % 60);
-            return minutes.toString() + ":" + (seconds > 9 ? seconds.toString() : '0' + seconds.toString()); 
-          }
-
+          // this updates the current play time
           $(htmlAudio).on('timeupdate', function() {
-            $(".recording-current").html(formatTime(htmlAudio.currentTime));
+            $(".recording-current").html(context.JK.prettyPrintSeconds (htmlAudio.currentTime));
 
-            // reset icon to play and slider to far left when done
+            // reset icon to play when done
             if (percentComplete === 100) {
-              $("#imgPlayPause").attr('src', '/assets/content/icon_playbutton.png');
+              $imgPlayPauseSelector.attr('src', playButtonPath);
             }
           });
 
           $("#btnPlayPause").click(function() {
             if (htmlAudio.paused) {
               htmlAudio.play();
-              $("#imgPlayPause").attr('src', '/assets/content/icon_pausebutton.png');
+              $imgPlayPauseSelector.attr('src', pauseButtonPath);
             }
             else {
               htmlAudio.pause();
-              $("#imgPlayPause").attr('src', '/assets/content/icon_playbutton.png');
+              $imgPlayPauseSelector.attr('src', playButtonPath);
             }
           });
       });
diff --git a/web/app/views/recordings/show.html.erb b/web/app/views/recordings/show.html.erb
index cd982c0df..cec8f1caa 100644
--- a/web/app/views/recordings/show.html.erb
+++ b/web/app/views/recordings/show.html.erb
@@ -66,8 +66,8 @@
       <div class="recording-current">0:00</div>
       <audio controls preload="none" style="display:none;">
         <% if @claimed_recording.has_mix? %>
-          <source src="<%= claimed_recording_download_url(@claimed_recording.id, 'mp3') %>" type="mp3">
-          <source src="<%= claimed_recording_download_url(@claimed_recording.id, 'ogg') %>" type="ogg">
+          <source src="<%= claimed_recording_download_url(@claimed_recording.id, 'mp3') %>" type="audio/mpeg">
+          <source src="<%= claimed_recording_download_url(@claimed_recording.id, 'ogg') %>" type="audio/ogg">
         <% end %>
       </audio>
       <% if !@claimed_recording.has_mix? %>
@@ -114,8 +114,13 @@
           var showRecording = new JK.ShowRecording(JK.app);
           showRecording.initialize("<%= @claimed_recording.id %>", "<%= @claimed_recording.recording_id %>");
 
+          $("#recordingDuration").html(formatTime("<%= @claimed_recording.recording.duration %>"));
+
           // remainder of this code is related to playing/pausing the recording
           var htmlAudio = $(".recording-controls").find('audio').get(0);
+          var $imgPlayPauseSelector = $("#imgPlayPause");
+          var playButtonPath = '/assets/content/icon_playbutton.png';
+          var pauseButtonPath = '/assets/content/icon_pausebutton.png';
           var durationInitialized = false;
 
           function formatTime(time) {
@@ -124,19 +129,15 @@
             return minutes.toString() + ":" + (seconds > 9 ? seconds.toString() : '0' + seconds.toString()); 
           }
 
-          // this calculates the original 
+          // this sets the slider to the appropriate position and updates the current play time
           $(htmlAudio).on('timeupdate', function() {
-            if (!durationInitialized) {
-              $("#recordingDuration").html(formatTime(htmlAudio.duration));
-              durationInitialized = true;
-            }
             var percentComplete = (htmlAudio.currentTime / htmlAudio.duration) * 100;
             $(".recording-slider").css({'left': percentComplete + '%'});
             $(".recording-current").html(formatTime(htmlAudio.currentTime));
 
             // reset icon to play and slider to far left when done
             if (percentComplete === 100) {
-              $("#imgPlayPause").attr('src', '/assets/content/icon_playbutton.png');
+              $imgPlayPauseSelector.attr('src', playButtonPath);
               $(".recording-slider").css({'left': 0 + '%'});
             }
           });
@@ -144,11 +145,11 @@
           $("#btnPlayPause").click(function() {
             if (htmlAudio.paused) {
               htmlAudio.play();
-              $("#imgPlayPause").attr('src', '/assets/content/icon_pausebutton.png');
+              $imgPlayPauseSelector.attr('src', pauseButtonPath);
             }
             else {
               htmlAudio.pause();
-              $("#imgPlayPause").attr('src', '/assets/content/icon_playbutton.png');
+              $imgPlayPauseSelector.attr('src', playButtonPath);
             }
           });
       });