[SOLUCIONADO] crear barra de progresos en canvas para cancion

merops · #1 (**permalink**) 22/02/2015, 10:53

buenas tardes .
tengo que hacer un reproductor de audio, que me haga la barra de progresos dentro de un rectangulo de canvas, y que ira aumentando la longitud segun el tiempo de la cancion

alguna idea?
un saludo
gracias

merops · #2 (**permalink**) 23/02/2015, 05:57

buenos dias he conseguido este codigo

Cita:

<html>
<head>
<title></title>
<script>

//cargamos el elemento canvas
var canvas;

//una vez cargado el elemento, le digo en que contexto trabajaremos, en este caso 2d
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");
progreso = 1;
setInterval("Barra()", 100);

}

function Barra()
{
contexto.fillRect(0, 0, progreso++, 15);
}
</script>
</head>

<body>

<canvas id=”pantalla” width=”640″ height=”480″>
Este texto será el que muestre el navegador no compatible.<br>Por favor, actualiza a una versión que soporte HTML5.
</canvas>
</body>
</html>

y los botones

Cita:

el audio seria cancion2.mp3
pero no consigo saber donde tengo que poner el audio y como relacionarlo y que el rectangulo haga de barra de progresos
¿me echais un cable?
muchas gracias

merops · #3 (**permalink**) 24/02/2015, 06:28

no hay ni idea de esto? yo si que no se por donde cogerlo,
creo el canvas pero luego soy incapaz de poner el audio dentro ni los botones,
y menos la barra de progresos,
ayudita? por fa

Pantaláimon · #4 (**permalink**) 25/02/2015, 16:05

A mi me funciona.

Ahora bien, hay que procurar que el texto que creas lo escribas en un editor de texto plano. O si lo copias, que tenga caracteres correctos.

En tu caso tienes caracteres como las comillas que no són los correctos. Por ejemplo:

Código Javascript:

Ver originalid=”pantalla” width=”640&#8243; height=”480&#8243;

debería ser:

Código Javascript:

Ver original<canvas id="pantalla" width="640" height="480">

Aquí el código funcionando: http://jsfiddle.net/8cpv3q08/

Aunque yo haría la barra de progresos con divs y no con canvas. Pues no es necesario.

Un saludo!

merops · #5 (**permalink**) 26/02/2015, 04:58

Hola gracias . eso ya lo solucione.
Pero me piden q ponga el rectángulo con el progress y q tenga botones para play, red,fw,stop ,reinicio, y funcione la canción . espero haber me explicado
Un saludo y gracias

Pantaláimon · #6 (**permalink**) 26/02/2015, 14:32

Te explicaste perfectamente.

Busca información de cómo funciona setInterval. Pues, a parte de ejecutar una función cada cierto intervalo, devuelve un identificador para poder parar la acción repetida mediante clearInterval. Esto te servirá para parar/activar la reproducción. Rebobinar o avanzar es sólo cambiar el valor de la variable progreso y redibujar.

Seguramente al rebobinar te puedas encontrar algún problema si no limpias la pantalla antes de volver a dibujar. Son cosas que poco a poco tendrás que ir buscando cómo hacer y solucionando. Pero no pretendas que te dé el código hecho. En todo caso ve publicando lo que tengas hecho y en qué te encallas en concreto.

Un saludo!

merops · #7 (**permalink**) 27/02/2015, 05:44

saludos,
tengo parte ya , he conseguido hacer el canvas que se mueva como una barra de progreso, y consigo que haga play y pause, aunque se desajusta,
no he conseguido hacer el rewind y forward, y tampoco el restar ,
se que me falta algo, pero no doy con el que,
os mando el codigo a ver si vosotros veis el fallo, ¡que seguro que lo hay!

Cita:

<!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>

<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">&lhblk;</button>
</div>

</body>

</html>

gracias

Pantaláimon · #8 (**permalink**) 27/02/2015, 09:02

He pasado lo que tienes a jsfiddlle para poder testearlo rápidamente.

http://jsfiddle.net/8cpv3q08/1/

En el post anterior, a parte de pedirte que pusieras tus avances te di pistas de como resolver ciertos problemas que ya intuía que te pasarían.

Canvas pinta encima de los dibujos que has pintado anteriormente. Por eso la barra de progreso tiene ese comporatamiento tan extraño. Pues si pintas un rectángulo pequeño dentro de otro más grande del mismo color, no producirá ningún efecto. Por tanto, antes de dibujar un nuevo rectangulo en el canvas hay que limpiar la pantalla con el método clearRect

Si miramos aquí:

Código HTML:

Ver original<button id="rew" onclick="barra(-10)">&lt;&lt;</button>

Al clicar rebobinar llamas a una función barra que no existe en javascript.

La variable progreso debería guardar el número de pixeles en la que está la barra. Y el número de píxeles debería estar en relación directa con el porcentaje de progreso de la canción y el ancho total de la barra. De momento sólo le vas sumando un píxel cada vez que se ejecuta la función Barra().

Cuando clicas al botón de stop llamas a la función restart. En esta función llamas a contexto.clear(0, 0, progreso++, 30); . No sé de donde has sacado que existe el método clear. A parte, ¿la variable prograso no debería reinicializarse a 0?

PD.: Intenta separar mentalmente que código utilizas para ejecutar la animación de barra de progreso de canvas y qué otro código utilizas para parar/ejecutar/avanzar/retroceder el sonido. Porque por el código que escribes parece que tienes un buen batiburrillo mental.

Un saludo!

merops · #9 (**permalink**) 28/02/2015, 15:41

Gracias y si tengo bastante batiburrillo. Es lo q pasa cuando se a apunta una a un curso q parece q esta echo paras gente q sabe ya webs y no te venden el curso para todos incluso aquellos q no saben
Lo repasaste con tu a pautras
Gracias

merops · #10 (**permalink**) 21/03/2015, 16:13

saludos
siento la tardanza, me lie con otras cosas, descubri donde fallaba, gracias a todos a los que pregunto, y sobre todo por que me explicaron donde iba acada cosa,
asi que aqui os dejo el codigo para otros, que quiza tampoco sean capaces de encontrar donde se equivocaban ,

Cita:

<!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>

<button id="rew" ><<</button>
<button id="play">></button>
<button id="fastFwd">>></button>
<button id="restart">&lhblk;</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>

asi pondran estudiarlo y asimilarlo,
gracias a todos