JSFiddle - React, Tailwind, and code Playground

by Mamdouh Freelancer

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
Sounds Playlist: <br/>
<ul id='playlist'></ul>
</div>

CSS

#playlist{
padding:0;
margin:0;
}
#playlist li{
color:#222;
padding:8px;
list-style:none;
background:white;
cursor:hand;
}
#playlist li:hover{
padding-left:20px;
background:red;
color:white;
}

JavaScript

var sng = new Audio();

var sounds = [
{"file":"path-to/sound1.mp3","title":"title of sound 1"},
{"file":"path-to/sound2.mp3","title":"title of sound 2"},
{"file":"path-to/sound3.mp3","title":"title of sound 3"},
{"file":"path-to/sound4.mp3","title":"title of sound 4"}
]

//append li to the parent ul menu
$.each(sounds,function(i,e){
$("#playlist").append("<li title='"+e.title+"' class='sound'><span class='btn'>&#9658;</span> "+e.file+"</li>");
});
$(".sound").click(function(){
$(this).fadeOut().fadeIn();
$(".btn").html("&#9658;");
if(sng.paused){
var s = $(this).index();
sng.src = sounds[s]["file"];
sng.play();
$(this).find(".btn").html("&#10074;&#10074;");
}else{
sng.pause();
$(this).find(".btn").html("&#9658;");
}
});