replace class/text WIP

not working

by nojava

HTML

<a class="button3 icon play" id="play" href="#"><span>Play</span></a>

CSS

a.button3 {font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif !important; font-size: 12px; font-weight: bolder; color:white;
background: rgba(0, 0, 0, 0.376) none repeat scroll 0 0; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 2px; color: #ffffff; cursor: pointer; font-family: "Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif !important; font-style: normal; font-weight: 700; height: 11px; letter-spacing: 0; line-height: 90%; padding: 4px 5px 3px;position: fixed; left: 197px;  text-decoration: none; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.15); top: 2px; z-index: 5000;
}


a.button3:hover {font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif !important; font-size: 12px; font-weight: bolder; color:white;background: none repeat scroll 0 0 rgba(0, 0, 0, 0.34);
}

a.button3.icon{
padding-left: 2px;
}

a.button3.icon span{
padding-left: 20px;
background: url('http://static.tumblr.com/g7ueics/Mhfojxle8/vert-sprites2.png') no-repeat; 
width: 15px; 
height: 15px;
}

a.button3.play span{background-position: -5px -5px ;
}

a.button3.pause span{background-position: -5px -61px ;
}

JavaScript

var audio = new Audio(),
    u = 0;
var playlist = new Array('http://www.w3schools.com/htmL/horse.mp3', 'http://sifidesign.com/audio/explosion.mp3');

audio.addEventListener('ended', function () {
    u = ++u < playlist.length ? u : 0;
    console.log(u)
    audio.src = playlist[u];
    audio.play();
}, true);

audio.onloadstart  = function() {
    $('#play span').text('Loading');
};

audio.oncanplay = function() {
    if (audio.paused) {
    $('#play span').text('Play'); }
    else {
    $('#play span').text('Pause'); };
}

function aud_play_pause() {
  if (audio.paused) {
    audio.play(); 
    $('#play span').text('Pause');
    $('#play').removeClass('play').addClass('pause');
        
 } 
 else {
    audio.pause();
    $('#play span').text('Play');
    $('#play').removeClass('pause').addClass('play');
  }
}

document.querySelector('#play').addEventListener('click', aud_play_pause)

audio.volume = 0.5;
audio.loop = false;
audio.src = playlist[0];
audio.play();