From 12949bb855fbd9559643889ca602d7f6cc4e2ede Mon Sep 17 00:00:00 2001
From: "S.D" <sb201418@gmail.com>
Date: Thu, 4 Jun 2020 20:21:13 +0100
Subject: [PATCH] Update playback -> tries to autoplay mute button otherwise

---
 css/custom.css     |  5 +++++
 index.html         | 20 ++++++++++++++++----
 js/my_functions.js | 30 ++++++++++++++++++++++++++++++
 3 files changed, 51 insertions(+), 4 deletions(-)
 create mode 100644 js/my_functions.js
diff --git a/css/custom.css b/css/custom.css
index 24cbf28..bd002a9 100644
--- a/css/custom.css
+++ b/css/custom.css
@@ -21,3 +21,8 @@
     background-color: rgba(0.1, 0.1, 0.1, 0.8);
     padding: 18px;
 }
+
+#volbutton
+{
+    opacity: 0.33;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 8cf128c..1b1670b 100644
--- a/index.html
+++ b/index.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+    <!--https://www.youtube.com/watch?v=VpZu69OB2KM-->
     <meta content="text/html" http-equiv="Content-Type"/>
     <meta charset="UTF-8">
 
@@ -13,10 +14,13 @@
     <link rel="stylesheet" href="css/bulma.css">
     <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
     <link href="favicon.ico" rel="icon"/>
-</head>
-<body>
 
-    <audio autoplay loop>
+    <script src="js/my_functions.js" type="text/javascript"></script>
+    </head>
+
+<body>
+    <audio autoplay loop id="banging-tune" onplay=handleFirstPlay(event)>
+        <!--https://soundcloud.com/drafthousefilms/against-the-ninja-->
         <source src="audio/against-the-ninja.mp3" type="audio/mpeg">
     </audio>
 
@@ -29,8 +33,16 @@
             </div>
         </div>
         <div class="hero-foot">
+            <div class="tabs">
+                <ul>
+                    <li>
+                        <button class="button" id="volbutton" onclick="playPause()">
+                            <span class="icon"><i id="volume-control" class="fas fa-volume-up"></i></span>
+                        </button>
+                    </li>
+                </ul>
+            </div>
         </div>
     </section>
-
 </body>
 </html>
\ No newline at end of file
diff --git a/js/my_functions.js b/js/my_functions.js
new file mode 100644
index 0000000..875d8d3
--- /dev/null
+++ b/js/my_functions.js
@@ -0,0 +1,30 @@
+/* https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide
+put some better error handling on playing and shit */
+
+function handleFirstPlay(event) {
+    /* if autoplay does go off, but the volume button in the right position */
+    let player = event.target;
+    console.log("here!");
+    player.onplay = null;
+    
+    volume_element = document.getElementById("volume-control");
+    volume_element.classList.remove("fa-volume-up");
+    volume_element.classList.add("fa-volume-off");
+}
+
+function playPause() {
+    player = document.getElementById("banging-tune");
+    volume_element = document.getElementById("volume-control");
+    if (volume_element.classList.contains("fa-volume-up"))
+    {
+        player.play();
+        volume_element.classList.remove("fa-volume-up");
+        volume_element.classList.add("fa-volume-off");                
+    }
+    else
+    {
+        player.pause();
+        volume_element.classList.remove("fa-volume-off");
+        volume_element.classList.add("fa-volume-up");                  
+    }
+}
\ No newline at end of file
