Landpage, V1 {audio fix}

martinobettucci · Mar 5, 2022 · 075aeb2 · 075aeb2
1 parent b5d2998
commit 075aeb2
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 5 deletions.
diff --git a/.gitignore b/.gitignore
@@ -25,3 +25,4 @@ tmp
 *.a
 mkmf.log
 .jekyll-cache/
+/projects
diff --git a/assets/css/index.scss b/assets/css/index.scss
@@ -35,6 +35,13 @@ body {
   height: auto;
 }
 
+.alert {
+  font: 14px Arial, sans-serif;
+  background: white;
+  border: 1px solid lightgray;
+  box-shadow: 3px 3px 12px lightgray;
+}
+
 .starfield {
   position: absolute;
   top: 50%;
@@ -94,7 +101,7 @@ body {
 }
 
 .slit-in-horizontal {
-	animation: slit-in-horizontal 42s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
+  animation: slit-in-horizontal 42s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
 }
 
 @keyframes slit-in-horizontal {
@@ -110,4 +117,4 @@ body {
     transform: translateZ(0) rotateX(0);
     opacity: 1;
   }
-}
+}
diff --git a/index.html b/index.html
@@ -11,15 +11,52 @@
     <title>{{ site.title }}</title>
     <link rel="stylesheet" href="/assets/css/index.css">
   </head>
-  <body> 
+  <body>
     <div class="starfield"></div>
     <div class="logowrapper">
-      <img class="logo slit-in-horizontal" src="/assets/title5.png"/>
+      <div class="alert">
+        <p>Please allow this page to play background music and sounds</p>
+        <p style="float: right; margin: auto;">
+          <button value="0">Block</button>
+          <button value="1">Allow</button>
+        </p>
+      </div>
+      <img id="logo" class="logo slit-in-horizontal" src="/assets/title5.png" hidden/>
     </div>
     <iframe src="assets/tunes/silence.mp3" allow="autoplay" id="audio" style="display: none"></iframe>
-    <audio autoplay loop>
+    <audio id="theme" loop>
        <source src="/assets/tunes/theme.mp3" type="audio/mp3">
        Your browser does not support the audio element.
     </audio>
+    <script defer>
+      const audio = document.getElementById( 'theme' );
+      const logo = document.getElementById( 'logo' );
+      //audio.muted = true;
+
+      // Ask for audio permission
+      const alert_elem = document.querySelector( '.alert' );
+      audio.play().then( () => {
+        // Audio is allowed and playing
+        alert_elem.remove();
+        logo.hidden = false;
+        audio.muted = false;
+      } ).catch( () => {
+        // Forbidden, need user interaction
+        alert_elem.addEventListener( 'click', ({ target }) => {
+          if( target.matches('button') ) {
+            const allowed = target.value === "1";
+            if( allowed ) {
+              audio.play();
+              audio.muted = false;
+            } else {
+              // Remove intro animation if no sound :'(
+              logo.classList.remove('slit-in-horizontal');
+            }
+            alert_elem.remove();
+            logo.hidden = false;
+          }
+        } );
+      } );
+    </script>
   </body>
 </html>