Delay timbre library load to fix initialization bug

guess-tempo.html

@@ -39,7 +39,6 @@ <h2>What was the tempo?</h2>
 
   <script src="js/vendor/underscore-min.js"></script>
   <script src="js/vendor/jquery-2.1.3.min.js"></script>
-  <script src="js/vendor/timbre.js"></script>
   <script src="js/index.js"></script>
   <script src="js/guess-tempo.js"></script>
 </body>

js/guess-tempo.js

@@ -1,6 +1,7 @@
 (function() {
 
   var state = 'waiting';
+  var timbreState = 'waiting';
   var readyButtonEl = $('#ready');
   var speakerEl = $('.speaker');
   var formEl = $('#form');
@@ -40,7 +41,7 @@
     formEl.removeClass('hidden');
   }
 
-  function onReadyClick() {
+  function playGame() {
     scoreEl.addClass('hidden');
     readyButtonEl.addClass('hidden');
     speakerEl.removeClass('hidden');
@@ -51,13 +52,35 @@
     playTempo();
   }
 
+  function onTimbreLoaded() {
+    timbreState = 'ready';
+    playGame();
+  }
+
+  function onReadyClick() {
+    // Timbre library tries to start an AudioContext on load,
+    // which will fail if a user gesture has not yet happened.
+    // So we must dynamically load the library.
+    // Ideally the library should be modified to wait for a gesture
+    // or call context.resume() before attempting to play audio.
+    if (timbreState == 'ready') {
+      playGame();
+    } else if (timbreState == 'waiting') {
+      timbreState = 'loading';
+      var scriptEl = document.createElement("script");
+      scriptEl.setAttribute("src", "js/vendor/timbre.js");
+      document.body.appendChild(scriptEl);
+      scriptEl.addEventListener("load", onTimbreLoaded, false);
+    }
+  }
+
   function onSubmit(e) {
     e.preventDefault();
     formEl.addClass('hidden');
 
     var guessedBpm = guessedTempoEl.val();
     guessedTempoEl.val('');
-    
+
     if(typeof guessedBpm == "string") {
       guessedBpm = parseInt(guessedBpm);
       if(isNaN(guessedBpm)) guessedBpm = 0;

keep-bpm.html

@@ -33,7 +33,6 @@
 
   <script src="js/vendor/underscore-min.js"></script>
   <script src="js/vendor/jquery-2.1.3.min.js"></script>
-  <script src="js/vendor/timbre.js"></script>
   <script src="js/index.js"></script>
   <script src="js/keep-bpm.js"></script>
 </body>