jumping image music player

<html>
<head>
<style>
div.song {
position: fixed;
bottom: 0;
left: 0;
width: auto;
}
</style>
</head>
<body>

<div class="song">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<style>
#img:hover,
#img:focus {
-webkit-animation-name:bounce;
animation-name:bounce;
-webkit-transform-origin:center bottom;
transform-origin:center bottom;

}
</style>

<center>
<audio id="audio" src="https://dl.dropbox.com/s/ndzqn1ao5zl2han/They%20Who%20Govern%20Reason%20-Octopath%20Traveler.mp3"></audio>
<img id="img" src="https://graphic.neocities.org/1246603866141.gif" width=auto height=auto class="animate__animated">
</center>

<script>
document.getElementById("img").addEventListener("click", function(){
document.getElementById("audio").play();
});
</script>
</div>

</body>
</html>