music player by @puella

<!DOCTYPE html>
<head>

<!-----

music player by @puella. credit is not necessary, but it is appreciated! <3

----->

<!-- this is needed, do not change!!! -->
<script src="https://kit.fontawesome.com/f936906ae0.js" crossorigin="anonymous"></script>

</head>
<style>

#musicplayer{
    width:450px; /* width of the music player */
    border: 2px solid black; /* border around the music player */
    background:white; /* background color of the music player */
}

/* no change needed */
.controls{
    padding:5px;
    font-size:15px !important;
}

.songtitle{
    width:400px;
    font-size:20px !important; /* font size of the song title */
    padding-right:10px;
    display:flex;
}

i.fas:hover{
    cursor:help;
}

i.fas.fa-pause{
    border:1px solid black; /* border around pause button */
    padding:10px;
    background:white; /* background color of the pause button */
    color:black; /* color of the pause button */
}

i.fas.fa-play{
    border:1px solid black; /* border around play button */
    padding:10px;
    background:white; /* background color of the play button */
    color:black; /* color of the play button */
}

</style>
<body>

<!-- music player -->
<div id="musicplayer">
    <table>
        <tr>
            <td>
                <div class="controls"><div class="play" style="display:inline-block"><i class="fas fa-play" onclick="play()"></i></div></div>
            </td>
            <td>
            <!-- song title goes here --> <div class="songtitle"><marquee scrollamount="10">SONG TITLE HERE</marquee></div>
            </td>
        </tr>
    </table>
    <!-- mp3 goes here --> <audio id="music" src="MP3 LINK HERE"></audio>
</div>

<!-- javascript, do not change below this!! -->
<script>
let player = document.getElementById("music");

function play(){
    player.play();
    document.querySelector('.play').innerHTML = "<i class='fas fa-pause' onclick='pause()'></i>";
}

function pause(){
    player.pause();
    document.querySelector('.play').innerHTML = "<i class='fas fa-play' onclick='play()'></i>";
}

player.onended = function(){
    document.querySelector('.play').innerHTML = "<i class='fas fa-play' onclick='play()'></i>";
}
</script>
<!-- javascript, do not change above this -->

</body>
</html>