I am struggling to style an audio tag with a playlist of songs. Does anyone have any pre-made styles that I can use for a normal white MP3 player similar to the one in the picture I attached?
The MP3 player I'm aiming for
Here's the code explanation: I created a music player with a playlist feature that allows me to choose which song to play, it also plays songs automatically in sequence and loops back to the beginning when all songs have been played. I need help styling my code.
<meta charset="UTF-8">
<title>HTML5 Audio Player</title>
<style>
.audioPlayer{
display: block;
border-radius: 20px;
margin:0 auto;
}
#playlist{
list-style: none;
}
#playlist li a{
color:black;
text-decoration: none;
}
#playlist li a:hover{
color:grey;
}
#playlist li a:active{
color: steelblue;
}
#playlist .current-song a{
color:grey;
}
</style>
<p>Music provided through <a href="ljubinko-stojanovic-smrtnik-privatna-baza-podataka.webnode.com">private database</a></p>
<audio class="audioPlayer" src="" controls="" id="audioPlayer">
Your browser does not support this action.
</audio>
<ul id="playlist">
<li class="current-song"><a href="https://archive.org/download/crveni-telefon/Koktel%20ljubavi.mp3">Nedeljko Bajić Baja - Koktel Ljubavi</a></li>
<li><a href="https://archive.org/download/radio_202012/Disco.mp3">Nedeljko Bajić Baja - Disko</a></li>
<li><a href="https://archive.org/download/radio_202012/Radio.mp3">Nedeljko Bajić Baja - Radio</a></li>
<li><a href="https://archive.org/download/crveni-telefon/Crveni%20telefon.mp3">Nedeljko Bajić Baja - Crveni telefon</a></li>
</ul>
<script src="https://code.jquery.com/jquery-2.2.0.js"></script>
<script src="https://ia601405.us.archive.org/16/items/audioplayer_202012/audioPlayer.js"></script>
<script>
// loads the audio player
audioPlayer();
</script>