JSFiddle - React, Tailwind, and code Playground
HTML
<div class="recordingAccordionContent">
<div class="songPlayer">
<div class="play" data-audio-src="http://www.kozco.com/tech/piano2-CoolEdit.mp3">
</div>
<div class="songName">
<ul class="songList">
<li class="songTitle">Suite Venezolano - Registro</li>
<li class="songComposer">Composer: Antonio Lauro</li>
<li class="songTime">1:59</li>
</ul>
</div>
</div>
</div>
CSS
.songName{
margin-left: 2em;
padding-top: .17em;
width:100%;
}
.songList li{
display:inline-block;
text-decoration: none;
vertical-align: top;
}
.songTitle, .songComposer, .songTime{
width:30%;
}
.play{
background-image: url('https://cdn2.iconfinder.com/data/icons/iconslandplayer/PNG/128x128/CircleBlue/Play1Disabled.png');
background-repeat: no-repeat;
height:128px;
width:128px;
}
.pause{
background-image: url('https://cdn2.iconfinder.com/data/icons/iconslandplayer/PNG/128x128/CircleBordered/Stop1Disabled.png');
background-repeat: no-repeat;
height:128px;
width:128px;
}
JavaScript
var isPlaying = false;
function playMusic(){
var audioElement = document.createElement('audio');
var audioElementSrc = $(this).attr('data-audio-src');
if (isPlaying != true)
{
isPlaying = true;
audioElement.setAttribute('src', audioElementSrc);
$.get();
audioElement.addEventListener("loadeddata", function(){
audioElement.play();
}, true);
audioElement.addEventListener("ended", function() {
isPlaying = false;
});
$(this).addClass('pause');
$(this).removeClass('play');
$('.pause').click(function() {
audioElement.pause();
isPlaying = false
$(this).removeClass('pause');
$(this).addClass('play');
});
}
else
{
return false;
}
}
$(function(e){
$('.play').click(playMusic);
});