DressOrc/ColeSite
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

adds audio player

Browse source
This commit is contained in:
atlastrinity 2021-12-27 00:20:43 +00:00
parent 7fa5c00b9d
commit c3a2889cd5
14 changed files with 237 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

65
my-work.html Normal file
View file

@ -0,0 +1,65 @@
<HTML>
<head>
<link rel = "stylesheet" href = "my-work.css">
<link rel = "stylesheet" href = "audio.css">
<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">
<script src = "audioPlayer.js" defer></script>
</head>
<body id = "body">
<h1 id = "title">
My Work
</h1>
<div id = "audioContainer">
song name
<div class = "audioPlayer">
<audio class = "audioElement" src = "audio/twoTrucks.mp3" preload=”metadata” loop></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>
song name
<div class = "audioPlayer">
<audio class = "audioElement" src = "audio/goodbyeHorses.mp3" preload=”metadata” loop></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>
song name
<div class = "audioPlayer">
<audio class = "audioElement" src = "audio/ratsBirthdayMixtape.mp3" preload=”metadata” loop></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>
</div>
</body>
</HTML>