JSFiddle - React, Tailwind, and code Playground

by Erwin Maximiliano

HTML

<audio controls id="audio-1">
  <source src="http://www.stephaniequinn.com/Music/Allegro%20from%20Duet%20in%20C%20Major.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

<div class="box">
If you Hover me, the song will play!
</div>

CSS

.box{
  height:500px;
  width:500px;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:25px;
  color:white;
  background:black;
}

JavaScript

$(document).ready(function(){
var audio = $("#audio-1")[0];
$(".box").hover(function() {
    audio.play();
  });
/*
(function(){
 audio.stop();
});*/
});