insert audio element on page load

toolness · Jul 10, 2012 · d552250 · d552250
1 parent a817959
commit d552250
Showing 1 changed file with 20 additions and 14 deletions.
diff --git a/static/index.html b/static/index.html
@@ -122,10 +122,28 @@
     el.trigger("state-change");
   }
 
+  function insertAudioElement() {
+    var playback = $(".playback", el);
+    var cacheBuster = "?bust=" + Date.now();
+    playback.empty();
+    var audio = document.createElement("audio");
+    audio.setAttribute("controls", "controls");
+    var source = document.createElement("source");
+    source.setAttribute("src", "recording.mp3" + cacheBuster);
+    source.setAttribute("type", "audio/mp3");
+    audio.appendChild(source);
+    source = document.createElement("source");
+    source.setAttribute("src", "recording.ogg" + cacheBuster);
+    source.setAttribute("type", "audio/ogg");
+    audio.appendChild(source);
+    playback.append(audio);
+  }
+
   setRecordState("loading");
   wami.setup({
     id : $(".wami", el).attr("id"),
     onReady : function() {
+      insertAudioElement();
       setRecordState("idle");
     }
   });
@@ -144,33 +162,21 @@
   });
 
   $(".start", el).click(function startRecording() {
-    var playback = $(".playback", el);
     if (recordState != "idle")
       return;
     setRecordState("pre-recording");
-    playback.empty();
+    $(".playback", el).empty();
     wami.startRecording(baseURL + "/audio",
       wami.nameCallback(function() {
         setRecordState("recording");
       }),
       wami.nameCallback(function() {
-        playback.empty();
-        var audio = document.createElement("audio");
-        audio.setAttribute("controls", "controls");
-        var source = document.createElement("source");
-        source.setAttribute("src", "recording.mp3?bust=" + recordStart);
-        source.setAttribute("type", "audio/mp3");
-        audio.appendChild(source);
-        source = document.createElement("source");
-        source.setAttribute("src", "recording.ogg?bust=" + recordStart);
-        source.setAttribute("type", "audio/ogg");
-        audio.appendChild(source);
         jQuery.ajax({
           type: 'POST',
           url: baseURL + '/metadata',
           data: JSON.stringify(self.metadata),
           success: function() {
-            playback.append(audio);
+            insertAudioElement();
           },
           error: function() {
             el.trigger("error", "failed to upload metadata");