2021-12-27 00:20:43 +00:00
|
|
|
<HTML>
|
|
|
|
|
<head>
|
2021-12-27 19:53:20 +00:00
|
|
|
<link rel = "stylesheet" href = "../stylesheets/basics.css">
|
2022-05-05 20:24:26 +01:00
|
|
|
<link rel = "stylesheet" href = "../stylesheets/effects.css">
|
2021-12-27 19:53:20 +00:00
|
|
|
<link rel = "stylesheet" href = "../stylesheets/audio.css">
|
2021-12-27 00:20:43 +00:00
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
|
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
|
|
|
<link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">
|
|
|
|
|
|
2021-12-27 19:53:20 +00:00
|
|
|
<script src = "../scripts/audioPlayer.js" defer></script>
|
2021-12-27 00:20:43 +00:00
|
|
|
</head>
|
|
|
|
|
<body id = "body">
|
2021-12-27 19:53:20 +00:00
|
|
|
<div id = "title">
|
|
|
|
|
<h1>My Work</h1>
|
|
|
|
|
<a href = "../index.html">back</a>
|
|
|
|
|
</div>
|
|
|
|
|
|
2021-12-27 00:20:43 +00:00
|
|
|
<div id = "audioContainer">
|
2022-01-09 21:24:48 +00:00
|
|
|
<!--------------------------------------------------------------------------------------------->
|
2022-05-05 19:24:56 +01:00
|
|
|
<div class = "songTitle">Orchestral Assignment Work</div>
|
2021-12-27 00:20:43 +00:00
|
|
|
<div class = "audioPlayer">
|
2022-05-05 19:24:56 +01:00
|
|
|
<audio class = "audioElement" src = "../audio/OrchestralAssignmentPiece.mp3" preload=”metadata”></audio>
|
2021-12-27 00:20:43 +00:00
|
|
|
<div class = "playButtonContainer">
|
2021-12-27 19:53:20 +00:00
|
|
|
<button class = "playButton"><img src = "../images/play.png"></button>
|
2021-12-27 00:20:43 +00:00
|
|
|
</div>
|
|
|
|
|
<input type="range" class="audioSlider" max="100" value="0">
|
|
|
|
|
<span class = "timeContainer">
|
|
|
|
|
0:00
|
|
|
|
|
</span>
|
|
|
|
|
<span class = "timeSeparator">/</span>
|
|
|
|
|
<span class = "durationContainer">
|
|
|
|
|
0:00
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
2022-01-09 21:24:48 +00:00
|
|
|
<!--------------------------------------------------------------------------------------------->
|
2022-05-05 19:24:56 +01:00
|
|
|
<div class = "songTitle">Forest Vibes</div>
|
2021-12-27 00:20:43 +00:00
|
|
|
<div class = "audioPlayer">
|
2022-05-05 19:24:56 +01:00
|
|
|
<audio class = "audioElement" src = "../audio/ForestVibes.mp3" preload=”metadata”></audio>
|
2021-12-27 00:20:43 +00:00
|
|
|
<div class = "playButtonContainer">
|
2021-12-27 19:53:20 +00:00
|
|
|
<button class = "playButton"><img src = "../images/play.png"></button>
|
2021-12-27 00:20:43 +00:00
|
|
|
</div>
|
|
|
|
|
<input type="range" class="audioSlider" max="100" value="0">
|
|
|
|
|
<span class = "timeContainer">
|
|
|
|
|
0:00
|
|
|
|
|
</span>
|
|
|
|
|
<span class = "timeSeparator">/</span>
|
|
|
|
|
<span class = "durationContainer">
|
|
|
|
|
0:00
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
2022-01-09 21:24:48 +00:00
|
|
|
<!--------------------------------------------------------------------------------------------->
|
2022-05-05 19:24:56 +01:00
|
|
|
<div class = "songTitle">Happy Day</div>
|
2021-12-27 00:20:43 +00:00
|
|
|
<div class = "audioPlayer">
|
2022-05-05 19:24:56 +01:00
|
|
|
<audio class = "audioElement" src = "../audio/HappyDay.mp3" preload=”metadata”></audio>
|
2021-12-27 00:20:43 +00:00
|
|
|
<div class = "playButtonContainer">
|
2021-12-27 19:53:20 +00:00
|
|
|
<button class = "playButton"><img src = "../images/play.png"></button>
|
2021-12-27 00:20:43 +00:00
|
|
|
</div>
|
|
|
|
|
<input type="range" class="audioSlider" max="100" value="0">
|
|
|
|
|
<span class = "timeContainer">
|
|
|
|
|
0:00
|
|
|
|
|
</span>
|
|
|
|
|
<span class = "timeSeparator">/</span>
|
|
|
|
|
<span class = "durationContainer">
|
|
|
|
|
0:00
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
2022-01-09 21:24:48 +00:00
|
|
|
<!--------------------------------------------------------------------------------------------->
|
2022-05-05 19:24:56 +01:00
|
|
|
<div class = "songTitle">MiniBoss Theme</div>
|
|
|
|
|
<div class = "audioPlayer">
|
|
|
|
|
<audio class = "audioElement" src = "../audio/Miniboss.mp3" preload=”metadata”></audio>
|
|
|
|
|
<div class = "playButtonContainer">
|
|
|
|
|
<button class = "playButton"><img src = "../images/play.png"></button>
|
|
|
|
|
</div>
|
|
|
|
|
<input type="range" class="audioSlider" max="100" value="0">
|
|
|
|
|
<span class = "timeContainer">
|
|
|
|
|
0:00
|
|
|
|
|
</span>
|
|
|
|
|
<span class = "timeSeparator">/</span>
|
|
|
|
|
<span class = "durationContainer">
|
|
|
|
|
0:00
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
<!--------------------------------------------------------------------------------------------->
|
|
|
|
|
|
|
|
|
|
|
2022-01-09 21:24:48 +00:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!--
|
|
|
|
|
ok so to add a song, copy this and replace the things written in fullcaps
|
2022-02-20 15:51:52 +00:00
|
|
|
paste it above here underneath the long line of dashes
|
2022-01-09 21:24:48 +00:00
|
|
|
|
|
|
|
|
<div class = "songTitle">SONG TITLE</div>
|
|
|
|
|
<div class = "audioPlayer">
|
|
|
|
|
<audio class = "audioElement" src = "../audio/SONG FILE NAME.mp3" preload=”metadata”></audio>
|
|
|
|
|
<div class = "playButtonContainer">
|
|
|
|
|
<button class = "playButton"><img src = "../images/play.png"></button>
|
|
|
|
|
</div>
|
|
|
|
|
<input type="range" class="audioSlider" max="100" value="0">
|
|
|
|
|
<span class = "timeContainer">
|
|
|
|
|
0:00
|
|
|
|
|
</span>
|
|
|
|
|
<span class = "timeSeparator">/</span>
|
|
|
|
|
<span class = "durationContainer">
|
|
|
|
|
0:00
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
also worth copy and pasting the green line underneath just to make it easier for yourself next time you need to add a song
|
|
|
|
|
|
|
|
|
|
also, anything in green is a comment, you make comments using the symbols at the start and end of this bit
|
|
|
|
|
-->
|
2021-12-27 00:20:43 +00:00
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
</HTML>
|
