Less janky audio controls
authorCameron Ball <cameron@moodle.com>
Fri, 11 Dec 2020 09:51:03 +0000 (17:51 +0800)
committerCameron Ball <cameron@moodle.com>
Fri, 11 Dec 2020 10:01:52 +0000 (18:01 +0800)
index.html

index 178a479..6c9fe03 100644 (file)
@@ -5,6 +5,7 @@
                    <title>HTTP (Hurry, Time To Perth!)</title>
         <link rel="preconnect" href="https://fonts.gstatic.com">
         <link href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&display=swap" rel="stylesheet">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
         <script src="js/countdown.min.js"></script>
         <style>
          html {
          #controls {
              z-index: 999;
              position: absolute;
-             right: 0px;
-             bottom: 0px;
+             right: 20px;
+             bottom: 10px;
+             font-size: 50px;
          }
         </style>
          </head>
          <body>
         <div id="timer"></div>
-        <audio autoplay loop controls id="audio">
+        <audio loop id="audio">
             <source id="audio/1.mp4" src="" type="audio/webm" />
         </audio>
         <div id="controls">
-            <button onclick="document.getElementById('audio').play()">Play</button>
-            <button onclick="document.getElementById('audio').pause()">Pause</button>
+            <i id="toggle" onclick="toggleAudio()" class="fas fa-play"></i>
         </div>
         <video autoplay muted loop id="video">
             <source src="video/1.mp4" type="video/mp4">
      var activeAudio = Math.floor((Math.random() * 2) + 1);
      audioElement.src = "audio/" + activeAudio + ".webm";
 
+     function toggleAudio() {
+         var audio = document.getElementById("audio");
+         if (audio.paused) {
+             document.getElementById("toggle").classList.add('fa-pause');
+             document.getElementById("toggle").classList.remove('fa-play');
+             audio.play();
+         } else {
+             console.log('sup');
+             document.getElementById("toggle").classList.add('fa-play');
+             document.getElementById("toggle").classList.remove('fa-pause');
+             audio.pause();
+         }
+     }
+
      function pad(n, width, z) {
          z = z || '0';
          n = n + '';