Move audio html out of js

diff --git a/mediagoblin/static/js/audio.js b/mediagoblin/static/js/audio.js
index 50d58cd9b066263152062f88b15ded4893f6d2f0..909307f6bce6d78b767c9aed8e964c8974282618 100644 (file)
--- a/mediagoblin/static/js/audio.js
+++ b/mediagoblin/static/js/audio.js
@@ -116,6 +116,10 @@ var audioPlayer = new Object();
         var im = audioPlayer.imageElement;
         var pos = (e.offsetX || e.originalEvent.layerX) / im.width();
 
+       console.log('pos', (e.offsetX || e.originalEvent.layerX) / im.width())
+       console.log('setting current time to',
+                       pos * audioPlayer.audioElement.duration)
+
         audioPlayer.audioElement.currentTime = pos * audioPlayer.audioElement.duration;
         audioPlayer.audioElement.play();
         audioPlayer.setState(audioPlayer.PLAYING);
@@ -200,19 +204,9 @@ var audioPlayer = new Object();
          * Attach the player to an image element
          */
         console.log(imageElement);
-
         var im = $(imageElement);
-
         audioPlayer.imageElement = im;
 
-        $('<div class="playhead"></div>').appendTo(im.parent());
-        $('<div class="buffered-indicators"></div>').appendTo(im.parent());
-        $('<div class="seekbar"></div>').appendTo(im.parent());
-        $('<div class="audio-control-play-pause paused">▶</div>').appendTo(im.parent());
-        $('<div class="audio-currentTime">00:00</div>').appendTo(im.parent());
-        $('<input type="range" class="audio-volume"'
-                +'value="1" min="0" max="1" step="0.001" />').appendTo(im.parent());
-        $('.audio-spectrogram').trigger('attachedControls');
     };
 })(audioPlayer);
 

diff --git a/mediagoblin/templates/mediagoblin/media_displays/audio.html b/mediagoblin/templates/mediagoblin/media_displays/audio.html
index 7571f8636f5c20ec98ad0ec3b4370a7862bf606e..4e7f9f820267662333ba6fb6644be06b3e4ffd62 100644 (file)
--- a/mediagoblin/templates/mediagoblin/media_displays/audio.html
+++ b/mediagoblin/templates/mediagoblin/media_displays/audio.html
@@ -30,6 +30,12 @@
     <div class="audio-media">
       {% if 'spectrogram' in media.media_files %}
         <div class="audio-spectrogram">
+          <div class="playhead"></div>
+          <div class="buffered-indicators"></div>
+          <div class="seekbar"></div>
+          <div class="audio-control-play-pause paused">▶</div>
+          <div class="audio-currentTime">00:00</div>
+          <input type="range" class="audio-volume" value="1" min="0" max="1" step="0.001" />
          <img src="{{ request.app.public_store.file_url(
                        media.media_files.spectrogram) }}"
               alt="Spectrogram" />