<!DOCTYPE html>
<html>
<head>
<title> Barra de audio con canvas HTML5</title>
<style type="text/css">
canvas {
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
display: block;
}
div {
width:500px;
height:60px;
margin: 10px auto;
}
</style>
<script>
var canvas;
var contexto;
var progreso;
window.onload = function(){
//cargamos el elemento canvas
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()
{
contexto.fillRect(0, 0, progreso++, 30);
}
// cuando activamos play y pause , combina el boton
function pauseplay() {
var musica = document.getElementById("audio2");
var button = document.getElementById("play");
if (musica.paused) {
musica.play();
button.textContent = "||";
progreso = musica.currentTime;
setInterval("Barra()", 500);
} else {
musica.pause();
button.textContent = ">";
progreso=0;
}
}
function restart() {
var musica = document.getElementById("audio2");
//hay que borrar la barra de progreso
contexto.clear(0, 0, progreso++, 30);
}
function salto(value) {
//papra adelantar o atrasar la barra
var musica = document.getElementById("audio2");
musica.currentTime += value;
}
</script>
</head>
<body>
<audio id="audio2" >
<source src="cancion1.mp3" type="audio/mp3" />
</audio>
<canvas id="pantalla" width="500" height="30" style="border: 1px solid green">
</canvas>
<div>
<!--para conseguir ir hacia atras salto le restamos 10, y para adelante le sumamos 10 -->
<button id="rew" onclick="barra(-10)"><<</button>
<button id="play" onclick="pauseplay()">></button>
<button id="fastFwd" onclick="barra(10)">>></button>
<button id="restar" onclick="restart">▄</button>
</div>
</body>
</html>