S.D/against-the-ninja.xyz
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Update playback -> tries to autoplay mute button otherwise

Browse Source
This commit is contained in:
Sid 2020-06-04 20:21:13 +01:00
parent 1544047908
commit 12949bb855
3 changed files with 51 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
css/custom.css
View File

@ -21,3 +21,8 @@
background-color: rgba(0.1, 0.1, 0.1, 0.8); background-color: rgba(0.1, 0.1, 0.1, 0.8);
padding: 18px; padding: 18px;
} }
#volbutton
{
opacity: 0.33;
}

20
index.html
View File

@ -1,6 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<!--https://www.youtube.com/watch?v=VpZu69OB2KM-->
<meta content="text/html" http-equiv="Content-Type"/> <meta content="text/html" http-equiv="Content-Type"/>
<meta charset="UTF-8"> <meta charset="UTF-8">
@ -13,10 +14,13 @@
<link rel="stylesheet" href="css/bulma.css"> <link rel="stylesheet" href="css/bulma.css">
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script> <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
<link href="favicon.ico" rel="icon"/> <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"> <source src="audio/against-the-ninja.mp3" type="audio/mpeg">
</audio> </audio>
@ -29,8 +33,16 @@
</div> </div>
</div> </div>
<div class="hero-foot"> <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> </div>
</section> </section>
</body> </body>
</html> </html>

30
js/my_functions.js Normal file
View File

@ -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");
}
}