JSFiddle - React, Tailwind, and code Playground

by adeneo

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

$(function (e) {
    $('.play').click(function() {
        var self = $(this).toggleClass('pause play');
        
        if (!this.audio) {
            this.audio = $('<audio />', {src : self.data('audio-src')}).on({
                loadeddata : function() {
                    this.play();
                },
                ended : function() {
                    self.toggleClass('pause play');
                }
            }).get(0);
        }else{
            this.audio[this.audio.paused ? 'play' : 'pause']();
        }
    });
});