diff --git a/web/app/views/music_sessions/show.html.erb b/web/app/views/music_sessions/show.html.erb
index 74ae13253..96ae0b6a2 100644
--- a/web/app/views/music_sessions/show.html.erb
+++ b/web/app/views/music_sessions/show.html.erb
@@ -52,10 +52,13 @@
   <br clear="all" />
   <div class="w100">
     <div class="recording-controls">
-      <a class="left mr20" href="#"><%= image_tag "content/icon_playbutton.png", {:width => 20, :height => 20, :alt => ""} %></a>
+      <a class="left mr20" href="#"><%= image_tag "content/icon_playbutton.png", {:id => "imgPlayPause", :width => 20, :height => 20, :alt => ""} %></a>
       <% if @music_session.session_removed_at.blank? %>
         <div class="session-status">SESSION IN PROGRESS</div>
-        <div class="recording-current">1:23</div>
+        <div class="recording-current"></div>
+        <audio controls preload="none" style="display:none;">
+          <source src="<%= @music_session.music_session.mount.url %>" type="<%= @music_session.music_session.mount.resolve_string(:mime_type) %>">
+        </audio>
       <% else %>
         <div class="session-status-ended">LIVE SESSION ENDED</div>
       <% end %>
@@ -99,8 +102,38 @@
 <% content_for :extra_js do %>
     <script type="text/javascript">
         $(function () {
-            var showMusicSession = new JK.ShowMusicSession(JK.app);
-            showMusicSession.initialize("<%= @music_session.id %>");
+          var showMusicSession = new JK.ShowMusicSession(JK.app);
+          showMusicSession.initialize("<%= @music_session.id %>");
+
+            // remainder of this code is related to playing/pausing the recording
+          var htmlAudio = $(".recording-controls").find('audio').get(0);
+
+          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()); 
+          }
+
+          $(htmlAudio).on('timeupdate', function() {
+            $(".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');
+            }
+          });
+
+          $("#btnPlayPause").click(function() {
+            if (htmlAudio.paused) {
+              htmlAudio.play();
+              $("#imgPlayPause").attr('src', '/assets/content/icon_pausebutton.png');
+            }
+            else {
+              htmlAudio.pause();
+              $("#imgPlayPause").attr('src', '/assets/content/icon_playbutton.png');
+            }
+          });
+      });
         })
     </script>
 <% end %>
diff --git a/web/app/views/recordings/show.html.erb b/web/app/views/recordings/show.html.erb
index 1eef34c11..ceb08a75f 100644
--- a/web/app/views/recordings/show.html.erb
+++ b/web/app/views/recordings/show.html.erb
@@ -51,7 +51,7 @@
   <br clear="all" /><%= @claimed_recording.description %><br /><br />
   <div class="w100">
     <div class="recording-controls">
-      <a id="btnPlayPause" class="left"><%= image_tag "content/icon_playbutton.png", {:id => "imgPlayPause", :width => 20, :height => 20, :alt => ""} %></a>
+      <a id="btnPlayPause" class="left" href="#"><%= image_tag "content/icon_playbutton.png", {:id => "imgPlayPause", :width => 20, :height => 20, :alt => ""} %></a>
       <div class="recording-position">
         <div class="recording-time">0:00</div>
         <div class="recording-playback">
@@ -102,6 +102,10 @@
 <% content_for :extra_js do %>
     <script type="text/javascript">
       $(function () {
+          var showRecording = new JK.ShowRecording(JK.app);
+          showRecording.initialize("<%= @claimed_recording.id %>", "<%= @claimed_recording.recording_id %>");
+
+          // remainder of this code is related to playing/pausing the recording
           var htmlAudio = $(".recording-controls").find('audio').get(0);
           var durationInitialized = false;
 
@@ -111,9 +115,6 @@
             return minutes.toString() + ":" + (seconds > 9 ? seconds.toString() : '0' + seconds.toString()); 
           }
 
-          var showRecording = new JK.ShowRecording(JK.app);
-          showRecording.initialize("<%= @claimed_recording.id %>", "<%= @claimed_recording.recording_id %>");
-
           // this calculates the original 
           $(htmlAudio).on('timeupdate', function() {
             if (!durationInitialized) {