<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 + '';