Cleanup

assets/scripts/africa.js

@@ -1,18 +1,7 @@
 var sound      = null;
-var playing    = true;
+var play       = document.getElementById('play');
-var control    = document.getElementById('control');
 var background = document.getElementById('background');
 
-function toggle() {
-  if(playing) {
-    sound.pause();
-    playing           = false;
-  } else {
-    sound.play();
-    playing           = true;
-  }
-}
-
 function load() {
   makeItRain();
   makeItPlay();
@@ -27,6 +16,7 @@ function makeItPlay() {
       control.style.visibility = 'hidden';
     }
   });
+
   setTimeout(enableToggle, 2500);
 }
 
@@ -37,14 +27,16 @@ function makeItRain() {
     });
     engine.rain([ [3, 2, 2] ], 100);
   };
-  background.src = 'assets/images/africa.png';
+  background.src         = 'assets/images/africa.png';
   background.crossOrigin = 'anonymous';
 }
 
+function play() {
+  sound.play();
+}
+
 var enableToggle = function() {
   if(0 === sound.pos()) {
-    playing                  = false;
+    play.style.visibility = 'visible';
-    control.className        = 'icon-play';
-    control.style.visibility = 'visible';
   }
 }

assets/styles/style.css

@@ -15,7 +15,7 @@ html, body, img, #container {
   text-align: center;
 }
 
-#control {
+#play {
   visibility: hidden;
   display: inline-block;
   border-radius: 10px;

index.html

@@ -13,7 +13,7 @@
     <img id="background" src="" />
 
     <div id="container">
-      <i id="control" class="icon-play" onclick="javascript:toggle();"></i>
+      <i id="play" class="icon-play" onclick="javascript:play();"></i>
     </div>
 
     <script>