Better dealing with autoplay

assets/scripts/africa.js

@@ -1,31 +1,29 @@
-var playing = false;
+var playing    = false;
-var control = document.getElementById('control');
+var control    = document.getElementById('control');
 var background = document.getElementById('background');
-
+var sound      = new Howl({
-var sound = new Howl({
   urls: ['assets/audio/africa.ogg', 'assets/audio/africa.m4a'],
   autoplay: true,
-  loop: true
+  loop: true,
+  onload: function() {
+    setTimeout(makeItPlay, 5);
+  }
 });
 
 function toggle() {
   if(playing) {
     sound.pause();
-    playing = false;
+    playing           = false;
     control.className = 'icon-play';
   } else {
     sound.play();
-    playing = true;
+    playing           = true;
     control.className = 'icon-pause';
   }
 }
 
 function load() {
   makeItRain();
-  if(!isMobile.any()) {
-    playing = true;
-    control.style.visibility = 'hidden';
-  }
 }
 
 function makeItRain() {
@@ -39,12 +37,9 @@ function makeItRain() {
   background.crossOrigin = 'anonymous';
 }
 
-var isMobile = {
+var makeItPlay = function() {
-  Android: function() { return navigator.userAgent.match(/Android/i); },
+  if(sound.pos() === 0) {
-  BlackBerry: function() { return navigator.userAgent.match(/BlackBerry/i); },
+    playing                  = false;
-  iOS: function() { return navigator.userAgent.match(/iPhone|iPad|iPod/i); },
+    control.style.visibility = 'visible';
-  Opera: function() { return navigator.userAgent.match(/Opera Mini/i); },
+  }
-  Windows: function() { return navigator.userAgent.match(/IEMobile/i); },
+}
-  any: function() { return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows()); }
-};
-

assets/styles/style.css

@@ -16,6 +16,7 @@ html, body, img, #container {
 }
 
 #control {
+  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-pause" onclick="javascript:toggle();"></i>
+      <i id="control" class="icon-play" onclick="javascript:toggle();"></i>
     </div>
 
     <script src="//cdnjs.cloudflare.com/ajax/libs/howler/1.1.17/howler.min.js"></script>