<!DOCTYPE html>
<html>
<head>
<style type="text/css">
canvas {
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
display: block;
border: 1px solid green;
}
div {
width:500px;
height:60px;
margin: 10px auto;
}
</style>
</head>
<body>
<audio id="audio2">
<source src="cancion1.mp3" type="audio/mp3" />
</audio>
<canvas id="pantalla" width="500" height="30" ></canvas>
<div>
<!--para conseguir ir hacia atras salto le restamos 10, y para adelante le sumamos 10 y creamos botones -->
<button id="rew" ><<</button>
<button id="play">></button>
<button id="fastFwd">>></button>
<button id="restart">▄</button>
</div>
<script type="text/javascript" >
window.onload = barramusica;
//variables
var musica;
var button;
var duracion;
var rew;
var play;
var fwd;
var restart;
var contexto;
function barramusica(){
//obtener los elementos
musica = document.getElementById("audio2");
duracion = musica.duration;
rew = document.getElementById("rew");
play = document.getElementById("play");
fwd = document.getElementById("fastFwd");
restart = document.getElementById("restart");
//Cuando hacemos click haga salto
rew.onclick = function() {salto(-10)};
fwd.onclick = function() {salto(10)};
play.onclick = pauseplay;
restart.onclick = Stop;
musica.ontimeupdate = Barra;
//cargamos el elemento canvas
var canvas = document.getElementById("pantalla");
//una vez cargado el elemento, le digo en que contexto trabajaremos, en este caso 2d
contexto = canvas.getContext("2d");
}
//barra de progresos dentro del canvas
function Barra(){
//limpiar la barra
contexto.clearRect(0,0,500,30);
//sabemos la largura que es igual a lo que dura la cancion
var largura = Math.round(musica.currentTime*500/duracion);
contexto.fillRect(0, 0, largura, 30);
}
// cuando activamos play y pause , combina el boton
function pauseplay() {
if (musica.paused){
musica.play();
play.textContent = "||";
}else{
musica.pause();
play.textContent = ">";
}
}
function Stop() {
musica.load();
}
function salto(value) {
musica.currentTime += value;
}
</script>
</body>
</html>