diff --git a/index.html b/index.html
index 24e5919..816ebfc 100644
--- a/index.html
+++ b/index.html
@@ -11,7 +11,7 @@
     <script type="text/javascript" src="forcetouch.js"></script>
   </head>
   <body>
-    <div class="container">
+    <div class="container hidden">
       <div class="col-xs-4">
         <span id="label1" class="current">0.00</span>
       </div>
diff --git a/prank.js b/prank.js
index a9bd71c..0257dc0 100644
--- a/prank.js
+++ b/prank.js
@@ -1,5 +1,9 @@
 var sound = new Howl({
-  urls: ['crack.mp3']
+  urls: ['crack.mp3'],
+  onload: function(){
+    // makes sure the sound is loaded. then shows the html content
+    $('.container').removeClass('hidden');
+  }
 });
 
 
diff --git a/style.css b/style.css
index ce7bc8c..3508dba 100644
--- a/style.css
+++ b/style.css
@@ -43,3 +43,7 @@ span.done{
   height: 100%;
   display: none;
 }
+
+.hidden{
+  display: none;
+}
