Reproductor de musica en html5 sencillo

Vamos a ver como hacer un reproductor de música en html5 con los parámetros mas básicos, en el siguiente ejemplo podemos ver como controlar el play, pause, barra de progresión y el volumen:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<audio height="379">


  <source src="http://www.sonidosmp3gratis.com/sounds/experimental_3.mp3" type="audio/mp3">

</audio>

<br>
<progress value="0" max="100" id="barra" class="mi_barra"></progress><br>
<input type="range" id="volumen" value="100" onChange="reproductor(3);"><br>
<input type="button" value="play" onClick="reproductor(1);"> <input type="button" value="pause" onClick="reproductor(2);"><br>

<script>
function reproductor(valor){
    
    var medio = $('audio')[0];
    
    var barra = document.getElementById('barra');
    
    
    var duracion = parseInt(medio.duration);
    
    var totalbarra = 100;
    
    var dividir = totalbarra / duracion;
    
    var volumen = medio.volume;
    
    var rangovol = $('#volumen').val() / 100;
    
    
    

    
    
    // Si pulsas play
    if (valor==1){
    
    medio.play();

    progreso= setInterval(function(){
        
        var tiempo = parseInt(medio.currentTime);

        if (tiempo != duracion){
        barra.value += dividir / 2;
        
        }
        else {
        barra.value =0;
        clearInterval(progreso);
        }
        
    },500);
    }

    
    // Si pulsas pause
    else if (valor==2){
    
    clearInterval(progreso);
    medio.pause();
    
    }
    
    // Si cambias el volumen
    else if (valor==3){
        
        medio.volume= rangovol;
    }
    
    
}
</script>

demo http://jsfiddle.net/datoweb/f8u9b3k2/