hover on text music player

<!--- work for both pro plus and standard--->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">

<style>
@font-face {
font-family: excelorate;
src: url(https://dl.dropbox.com/s/f7hw8i3g3poiyp3/excelorate-font.otf);
}


#text01 { /*it can be another text id, but you'll have to change the code above where it says text01*/
font-family: excelorate;
-webkit-text-stroke: 1px #000;
-webkit-filter: drop-shadow(0px 0px 2px #ddd);
color: white;
}
</style>

<div id="text01">hola</div>

<audio id="audio" src="https://dl.dropbox.com/s/jbp06eplbfu8q26/%EB%93%A4%EB%B6%88%20wildfire.mp3"></audio>



<script>
document.getElementById('text01').addEventListener('click', function (e) {
e.preventDefault();
document.getElementById('audio').play();document.getElementById('text01').className = 'animate__animated animate__bounce';
});
</script>