<audio id="sound" controls loop
onabort="console.log('abort');"
oncanplay="console.log('canplay');"
oncanplaythrough="console.log('canplaythrough');"
ondurationchange="console.log('durationchange');"
onemptied="console.log('emptied');"
onended="console.log('ended');"
onerror="console.log('error');"
onloadeddata="console.log('loadeddata');"
onloadedmetadata="console.log('loadedmetadata');"
onloadstart="console.log('loadstart');"
onpause="console.log('pause');"
onplay="console.log('play');"
onplaying="console.log('playing');"
onprogress="console.log('progress');"
onratechange="console.log('ratechange');"
onreadystatechange="console.log('readystatechange');"
onseeked="console.log('seeked');"
onseeking="console.log('seeking');"
onstalled="console.log('stalled');"
onsuspend="console.log('suspend');"
ontimeupdate="console.log('timeupdate');"
onvolumechange="console.log('volumechange');"
onwaiting="console.log('waiting');">
<source src="s.mp3">
<source src="s.ogg">
</audio>

<a onclick="play();">PLAY</a>
<a onclick="pause();">PAUSE</a>
<a onclick="go(30);">GOTO(30s)</a>
<a onclick="skip(10);">SKIP(10s)</a>
<a onclick="reset();">RESET</a>
<a onclick="mute();">MUTE</a>
<a onclick="rateup(0.5);">RATEUP(+0.5)</a>
<a onclick="ratedown(0.5);">RATEDOWN(-0.5)</a>
<a onclick="timeupdate();" id="btn_time">TIMEUPDATE</a>
<a onclick="duration();" id="btn_duration">TOTAL</a>
<a onclick="volume(0.3);">VOLUME(0.3)</a>

<div id="barBd"><div id="bar"></div></div>

<script type="text/javascript">

var TARGET = document.getElementById('sound');

function play(){
    TARGET.play();
}

function pause(){
    TARGET.pause();   
}

function go(seconds){
    TARGET.currentTime = seconds;
}

function skip(seconds){
    TARGET.currentTime += seconds;
}

function reset(){
    TARGET.pause();
    TARGET.currentTime = 0;
}

function mute(){
    if(TARGET.muted){
        TARGET.muted = false;
    }else{
        TARGET.muted = true;
    }
}

function rateup(Num){
    // play()後反映、1が通常、0が停止
    TARGET.play();
    TARGET.playbackRate += Num;
}

function ratedown(Num){
    TARGET.play();
    TARGET.playbackRate -= Num;
}

function timeupdate(){
    TARGET.play();
    TARGET.addEventListener("timeupdate", function() {
        var NOW = Math.floor(TARGET.currentTime);
        document.getElementById('btn_time').innerHTML = NOW + 's';
    }, true);
}

function duration(){
    var TOTAL = Math.round(TARGET.duration);
    document.getElementById('btn_duration').innerHTML = TOTAL + 's';
}

function volume(Num){
    TARGET.volume = Num;
}

/*++ jQueryを使ったオリジナルプログレスバー ++*/


$(function(){
    $('a').click(function(){
        if(!TARGET.paused){
            var TOTAL = Math.round(TARGET.duration);
            TARGET.addEventListener("timeupdate", function() {
                var NOW   = Math.round(TARGET.currentTime);
                var PERCE = (NOW / TOTAL * 100) + '%';
                $('#bar').css({'width':PERCE});
            }, true);
        }
    });
});
</script>