JSFiddle - React, Tailwind, and code Playground

by Craig Martin

HTML

<script src="http://markcrossmusic.com/js/audiovis.js"></script>
<div class="mp3box">
<div id="playerbox"><div style="color: #E8E9D7; margin: -7px 14px 14px 0; float: right;">MCross Player</div>
        <div id="wrapper">
            <div id="fileWrapper" class="file_wrapper">
                <div id="visualizer_wrapper">
                <canvas id='canvas' width="390" height="150"></canvas>
                </div>
             </div>
         </div>
 <audio id="audio" preload="auto" tabindex="0" controls="" type="audio/mpeg">
        <source type="audio/mp3" src="http://markcrossmusic.com/mp3/MC Web GTR MCM.COM v.01.wav">
        Sorry, your browser does not support HTML5 audio.
    </audio>
    <ul id="playlist">
        <li class="active"><a href="http://markcrossmusic.com/mp3/MC Web GTR MCM.COM v.01.wav">High Energy Guitar Driven</a></li>
        <li><a href="http://markcrossmusic.com/mp3/MC Web Funky Drama - Comedy MCM.Com V.01.wav">Funky Jazzy Comedy</a></li>
        <li><a href="http://markcrossmusic.com/mp3/MC Web Orch MCM.COM v.01.wav">Orchestral / Dramatic</a></li>

    </ul>

</div></div>

CSS

#fileWrapper{
	transition:all 0.5s ease;
}
#fileWrapper:hover{
	opacity: 1!important;
}

#visualizer_wrapper{
	text-align: center;
padding: 0 0 0 5px;
}

#playerbox {
    background: rgba(101, 101, 89, 0.84);
    width: 400px;
    padding: 20px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 10px;
}
audio#audio {
    width: 400px;
    margin-top: 10px;
}

#playlist li {
    padding: 0;
    text-align: center;
}
ul#playlist {
    padding: 0;
}



#playlist .active a{color:#5DB0E6;text-decoration:none;}
#playlist li a{color:#eeeedd;background:#333;padding:5px;display:block;}
#playlist li a:hover{text-decoration:none;}
#playlist li {
    list-style-type: none !important;
}
/*
#playlist, audio {
    background: #666;
    width: 400px;
    padding: 20px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 10px;
}
*/
.mp3box {
    margin-left: auto;
    margin-right: auto;
    width: 440px;
}

#playlist .active a {
    margin: 5px 0 0 0;
    position: relative;
    border-width: 1px;
    border-style: solid;
    border-color: #5DB0E6;
    border-radius: 8px;
    box-shadow: 0px 1px 4px 0px #5DB0E6, 0px 0px 40px #5E89AF;
}



#playlist .active a:before{ 
    content: ""; 
    z-index: -1; 
    position: absolute; 
    width: 95%; 
    top: 0px; 
    right: 10px; 
    bottom: 0px; 
    left: 10px; 
    border-radius: 10px; 
    box-shadow: 0px 0px 20px #5DB0E6; 
} 
#playlist .active a:after{ 
    content: ""; 
    z-index: -1; 
    position: absolute; 
    width: 95%; 
    top: 0px; 
    right: 10px; 
    bottom: 0px; 
    left: 10px; 
    border-radius: 10px; 
    box-shadow: 0px 0px 20px #5DB0E6; 
}

#playlist li a {
    color: #eeeedd;
    background: #333;
    padding: 5px;
    display: block;
    margin: 5px 0 0 0;
    position: relative;
    border: 1px !important;
    border-radius: 8px;
}

JavaScript

var audio;
var playlist;
var tracks;
var current;

init();
function init(){
    current = 0;
    audio = jQuery('audio');
    playlist = jQuery('#playlist');
    tracks = playlist.find('li a');
    len = tracks.length - 1;
    audio[0].volume = .10;
    audio[0].play();
    playlist.find('a').click(function(e){
        e.preventDefault();
        link = jQuery(this);
        current = link.parent().index();
        run(link, audio[0]);
    });
    audio[0].addEventListener('ended',function(e){
        current++;
        if(current == len){
            current = 0;
            link = playlist.find('a')[0];
        }else{
            link = playlist.find('a')[current];    
        }
        run(jQuery(link),audio[0]);
    });
}
function run(link, player){
        player.src = link.attr('href');
        par = link.parent();
        par.addClass('active').siblings().removeClass('active');
        audio[0].load();
        audio[0].play();
}