Abril 19, 2018, 11:28:37 am

Autor Tema: crear barra de progresos en canvas para cancion  (Leído 2170 veces)

0 Usuarios y 1 Visitante están viendo este tema.

Desconectado poldara

  • Me das tu IP?
  • *
  • Mensajes: 38
  • Sexo: Femenino
  • gracias, por eliminar mi ignorancia
    • Ver Perfil
crear barra de progresos en canvas para cancion
« en: Febrero 23, 2015, 05:44:01 am »
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
como tengo que empezar, creo el canvas, y dentro del canvas el rectangulo que sera la barra de progresos, y los botones ¿donde los coloco? y el src:cancion? lo he intentado integrar en canvas y no me sale nada.
encontre este codigo y a partir de aqui lo he intentado y no se como hacerlo.
Citar
<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>

los botones serian :
Citar
<button id="rew" onclick="salto(-10)">&lt;&lt;</button>
    <button id="play" onclick="pauseplay()">&gt;</button>
    <button id="fastFwd" onclick="salto(10)">&gt;&gt;</button>

alguna idea?
un saludo
gracia

Desconectado .xAk.

  • el engendro
  • Colaborador
  • ****
  • Mensajes: 7311
  • Sexo: Masculino
  • F0r3v3R NeWbI3
    • Ver Perfil
Re:crear barra de progresos en canvas para cancion
« Respuesta #1 en: Febrero 24, 2015, 09:36:19 am »
:)) perdón por el off topic, pero parece que te comprometiste fácilmente

repetimos y ahora sin video
Is the truth out there?

Desconectado .xAk.

  • el engendro
  • Colaborador
  • ****
  • Mensajes: 7311
  • Sexo: Masculino
  • F0r3v3R NeWbI3
    • Ver Perfil
Re:crear barra de progresos en canvas para cancion
« Respuesta #2 en: Febrero 24, 2015, 09:58:12 am »
es de esas cosas

Desconectado poldara

  • Me das tu IP?
  • *
  • Mensajes: 38
  • Sexo: Femenino
  • gracias, por eliminar mi ignorancia
    • Ver Perfil
Re:crear barra de progresos en canvas para cancion
« Respuesta #3 en: Febrero 24, 2015, 01:54:27 pm »
 :'( no se lo q quieres decir xak

Desconectado .xAk.

  • el engendro
  • Colaborador
  • ****
  • Mensajes: 7311
  • Sexo: Masculino
  • F0r3v3R NeWbI3
    • Ver Perfil
Re:crear barra de progresos en canvas para cancion
« Respuesta #4 en: Febrero 24, 2015, 09:53:58 pm »
no es complicado esto, pero no se puede decir, que se sabe si no es cierto. eso (a veces sólo es eso, me expreso como el culo y no sentiende nada) jejeje recuero, , es x los otros threads, jijiji parece que quiere jugar

te me repites y tengo buen humor, no se puede decir a los demás que sabes de lo que no tienes ni idea.

SaludOS

Desconectado poldara

  • Me das tu IP?
  • *
  • Mensajes: 38
  • Sexo: Femenino
  • gracias, por eliminar mi ignorancia
    • Ver Perfil
Re:crear barra de progresos en canvas para cancion
« Respuesta #5 en: Febrero 25, 2015, 06:34:17 am »
yo no quiero que me hagais el ejercicio,
solo que me comenteis que necesito usar y como, por desgracia para mi, no tengo tan buena memoria como cuando tenia 20 años, y aprender si profesores, son horas y horas de trabajo personal y buscando,
yo no consigo ver como introducir en el rectangulo el progres, y tampoco como hacer que suene, mi cerebro no da mas de si,
si me ayudais bien y si no quereis o no podeis, gracias por todo, buscare otro sitio donde puedan ayudarme
un saludo

Desconectado .xAk.

  • el engendro
  • Colaborador
  • ****
  • Mensajes: 7311
  • Sexo: Masculino
  • F0r3v3R NeWbI3
    • Ver Perfil
Re:crear barra de progresos en canvas para cancion
« Respuesta #6 en: Febrero 25, 2015, 03:54:39 pm »
sí sí que te ayudaremos, voy a ver si le echo un vistazo mas poco a poco y te cuento algo un poco más tarde.

Desconectado Fofitxiki

  • Me das tu IP?
  • *
  • Mensajes: 81
    • Ver Perfil
Re:crear barra de progresos en canvas para cancion
« Respuesta #7 en: Febrero 26, 2015, 08:50:09 am »
Un ejemplo de como conseguir lo que quieres

fuente: You are not allowed to view links. Register or Login

codigo:
Citar
<!DOCTYPE html>
   <html>
      <head>
         <style> div#video_player_box{ width:550px; background:#000; margin:0px auto;}
                      div#video_controls_bar{ background: #333; padding:10px; color:#CCC;}
         </style>
         <script>
            var vid, playbtn, seekslider, curtimetext, durtimetext;

            function intializePlayer(){ // Set object references
               vid = document.getElementById("my_video");
               playbtn = document.getElementById("playpausebtn");
               seekslider = document.getElementById("seekslider");
               curtimetext = document.getElementById("curtimetext");
               durtimetext = document.getElementById("durtimetext"); // Add event listeners
               playbtn.addEventListener("click",playPause,false);
               seekslider.addEventListener("change",vidSeek,false);
               vid.addEventListener("timeupdate",seektimeupdate,false);
           }
           window.onload = intializePlayer;

           function playPause(){
              if(vid.paused){
                 vid.play();
                 playbtn.innerHTML = "Pause";
             } else {
                 vid.pause(); playbtn.innerHTML = "Play";
             }
          }

          function vidSeek(){
             var seekto = vid.duration * (seekslider.value / 100);
             vid.currentTime = seekto;
          }

          function seektimeupdate(){
             var nt = vid.currentTime * (100 / vid.duration);
             seekslider.value = nt;
             var curmins = Math.floor(vid.currentTime / 60);
             var cursecs = Math.floor(vid.currentTime - curmins * 60);
             var durmins = Math.floor(vid.duration / 60);
             var dursecs = Math.floor(vid.duration - durmins * 60);

             if(cursecs < 10){
               cursecs = "0"+cursecs;
             }

             if(dursecs < 10){
                dursecs = "0"+dursecs;
             }

             if(curmins < 10){
                curmins = "0"+curmins;
             }

             if(durmins < 10){
                durmins = "0"+durmins;
             }

             curtimetext.innerHTML = curmins+":"+cursecs;
             durtimetext.innerHTML = durmins+":"+dursecs;
          }
      </script>
   </head>
   <body>
      <div id="video_player_box">
         <video id="my_video" width="550" height="310" autoplay>
            <source src="Tom_and_Jerry.mp4">
         </video>
         <div id="video_controls_bar">
            <button id="playpausebtn">Pause</button>
            <input id="seekslider" type="range" min="0" max="100" value="0" step="1">
               <span id="curtimetext">00:00</span> / <span id="durtimetext">00:00</span>
         </div>
      </div>
   </body>
</html>


Desconectado poldara

  • Me das tu IP?
  • *
  • Mensajes: 38
  • Sexo: Femenino
  • gracias, por eliminar mi ignorancia
    • Ver Perfil
Re:crear barra de progresos en canvas para cancion
« Respuesta #8 en: Febrero 26, 2015, 09:44:41 am »
Muchas gracias veré como lo has hecho  y te haré preguntas si no lo entiendo

Desconectado poldara

  • Me das tu IP?
  • *
  • Mensajes: 38
  • Sexo: Femenino
  • gracias, por eliminar mi ignorancia
    • Ver Perfil
Re:crear barra de progresos en canvas para cancion
« Respuesta #9 en: Febrero 27, 2015, 05:53:53 am »
hola buenos dias .
vi tu codigo y lo estuve destripando, me ha servido para aclararme algunas duda , no todas.
de todas formas no es lo que tengo que hacer,
te envio el codigo, que tengo hecho hasta ahora, ya consigo que la barra de progresos funcione, se pare , aunque no siempre y se vuelve activar sola, y sigo trabajando en el rewin y el forward, asi como en el reinicio, que me he atascado,
creo que me falta alguna variable o funcion, o la funcion esta mal llamada. quiza lo veis vosotros,
o tengais otra posibilidad,
Citar
<!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)">&lt;&lt;</button>
    <button id="play" onclick="pauseplay()">&gt;</button>
    <button id="fastFwd" onclick="barra(10)">&gt;&gt;</button>
   <button id="restar" onclick="restart">&lhblk;</button>
</div>
   
   
   </body>
   
   
    </html>
   
a ver que os parece
un saludo y gracias

Desconectado Fofitxiki

  • Me das tu IP?
  • *
  • Mensajes: 81
    • Ver Perfil
Re:crear barra de progresos en canvas para cancion
« Respuesta #10 en: Marzo 01, 2015, 10:20:45 am »
He separado el código en tres archivo, en el primero esta la parte de html, en el segundo la parte de css y en el  tercero la parte de javascript.

barra.html
Código: You are not allowed to view links. Register or Login
<!DOCTYPE html>
<html>
    <head>
        <title> Barra de audio con canvas HTML5</title>
        <link rel="stylesheet" type="text/css" href="estilos.css"/>
        <script type="text/javascript" src="barra.js" ></script>
        <meta charset="utf-8" />
    </head>

    <body>
        <audio id="audio2">
            <source src="10 - Asociación de Verdurgos y Torturadores.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 -->
            <button id="rew" >&lt;&lt;</button>
            <button id="play">&gt;</button>
            <button id="fastFwd">&gt;&gt;</button>
            <button id="restart">&lhblk;</button>
        </div>
        <div id="text"></div>
    </body>
 </html>


estilos.css
Código: You are not allowed to view links. Register or Login
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;
     
}


barra.js
Código: You are not allowed to view links. Register or Login
window.onload = iniciaciones;

//variables globales
var musica;
var button;
var duracion;
   
var rew;
var play;
var fwd;
var restart;

var contexto;

function iniciaciones(){
//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");

//asignar los triggers
    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);
var anchura = Math.round(musica.currentTime*500/duracion);
    contexto.fillRect(0, 0, anchura, 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;
}

Desconectado poldara

  • Me das tu IP?
  • *
  • Mensajes: 38
  • Sexo: Femenino
  • gracias, por eliminar mi ignorancia
    • Ver Perfil
Re:crear barra de progresos en canvas para cancion
« Respuesta #11 en: Marzo 01, 2015, 03:44:20 pm »
un millon de gracias Fofitxiki
que bien se entiende, asi parece hasta facil, claro en mi codigo no entraba la formula math ,  :-[que malo es no saber, y menos entender,
muchas gracias de verdad
 :)


question
Ayuda para copiar canvas de una web

Iniciado por Solid Water

0 Respuestas
4425 Vistas
Último mensaje Noviembre 23, 2017, 03:55:54 pm
por Solid Water
resuelto
Para el que quiera pasar un rato: canvas invaders

Iniciado por messerschmitt

2 Respuestas
1969 Vistas
Último mensaje Junio 15, 2013, 04:50:41 am
por Solid Water
question
¿Crear barra de herramientas?

Iniciado por carlooooos

5 Respuestas
2054 Vistas
Último mensaje Junio 05, 2010, 06:10:32 pm
por JaAViEr
xx
CREAR BARRA DE NAVEGACIÓN EN DREAMWEAVER

Iniciado por shevchenko

0 Respuestas
2511 Vistas
Último mensaje Abril 07, 2009, 07:25:41 pm
por shevchenko
question
Como crear una barra de cargado?

Iniciado por DarkProgrammer

3 Respuestas
1807 Vistas
Último mensaje Julio 06, 2009, 04:59:57 pm
por EddyW
xx
Como crear un ?loquequieras en la barra de direcciones

Iniciado por locotron21212121

4 Respuestas
1681 Vistas
Último mensaje Mayo 11, 2009, 01:17:34 pm
por Karmac
xx
Se necesita cancion para juego

Iniciado por Jonh Limon

2 Respuestas
831 Vistas
Último mensaje Marzo 28, 2009, 08:56:34 pm
por RockoX
xx
canvas

Iniciado por josea210

2 Respuestas
1246 Vistas
Último mensaje Mayo 02, 2009, 09:34:26 am
por josea210
xx
Cancion: El windows vista es una mierda, para reirse xd!!

Iniciado por Dj_Dexter

15 Respuestas
4832 Vistas
Último mensaje Enero 06, 2008, 02:00:30 pm
por Hacker Chapin
xx
Juego en canvas

Iniciado por messerschmitt

5 Respuestas
1298 Vistas
Último mensaje Marzo 16, 2013, 12:18:01 pm
por HackID1