Mantener reproductor music en todas mis paginas web

[HackID1]

Hola foreros!!!.
Estoy creando una web, que en si el contenido va dirigido a música, y he visto páginas como esta http://www.deezer.com/ en la cual tiene un reproductor y esté siempre esta visible.

¿Cómo puedo hacer esto, que debo hacer para tener un reproductor de música en mi web.?
Pero quisiera que la música que se escuche sea mia, es decir yo hacer la lista de reproducción si se puede que la música este en mi pc, ya que la pág web esta en modo local por ahora.

He encontrado una forma de tener una lista de reproducción con mis canciones pero estás las tengo que subir a mi dropbox y copiar el link, eso lo hice con FLASH.

Si conocen algo del tema o cualquier sugerencia para añadir a mi web, bienvenida.

(Por ahora estoy usando PHP, SQL para almacenar los nombres y artistas "no las canciones", y algo de XML "para la lista de reproducción junto con FLASH")

Un saludo!!!!.

[CircuitoX]

Para que aparezca en todas las paginas puedes hacerlo mediante sentencias o funciones de php, ejemplo include, require, etc. La forma más rápida seria trabajar mediante un cms, en joomla y wordpress creas un modulo o widget y le asignas para todas las paginas en general, mediante menú, id, etc.

Para subir archivos de audio te recomiendo:

SoundCloud
Amazon Cloud Drive

[HackID1]

Gracias por la respuesta CircuitoX. te comento:

Ya he logrado subir las canciones por medio de PHP al servidor y además las canciones subo los nombres y artista, genero a una BD.
En la tabla almaceno además de un ID_unico, artista, genero, album y un LINK para permitir escuchar la canción.

Bien las canciones se escuchan lo único que pasa es que cuando le doy a cualquier canción para escucharla en mi web, se abre en otra ventana y se reproduce la canción.

Lo que quisiera conseguir es abrir esa ventana siempre en una misma zona de la página, como en la parte superior un espacio para el Reproductor de música..

He leído y se puede hacer con FRAMES, pero si sabes alguna forma de hacerlo en PHP mejor.

Cuando abro los link de cada canción uso esto.

Código PHP:

echo '
<div id="tabladat" style="text-align:center;">
                
                    <table  width="90%" border="1" style="margin: 0 auto;">
                    <tr width="45%">
                        <td> <div align="center"> <strong> Canci&oacute;n </strong>     </div> </td> 
                        <td> <div align="center"> <strong> Art&iacute;sta </strong>     </div></td> 
                        <td> <div align="center"> <strong> Alb&uacute;m </strong>       </div></td> 
                        <td> <div align="center"> <strong> Escuchar </strong>           </div></td> 
                    </tr>'; 
 
                //MIENTRAS ALLA DATOS SE VA CREANDO FILAS CON LOS DATOS.
            while ($row = mysql_fetch_array($consulta)){ 
                echo ' 
                    <tr width="45%"> 
                        <td>'.$row['titulo'].'</td> 
                        <td>'.$row['nombreart'].'</td> 
                        <td>'.$row['nombrealb'].'</td> 
    <td><a href="'.$row['urldir'].'" target="_blank">
        <img src="http://localhost/musica1/musicas/paginas/img/boton_play.png">
        </a>
    </td> 
                    </tr> 
                    ';      //Cierra echo... 
            }       //Cierra while
 

Como vez la parte importante es esta donde esta el link.

Código HTML:

<td><a href="'.$row['urldir'].'" target="_blank">
        <img src="http://localhost/musica1/musicas/paginas/img/boton_play.png">
        </a>
    </td>
 

La cual se abre en una nueva ventana usando _blank. Si sabes como enviarla a una parte especifica y que se vea en todas las páginas lo agradezco.

Aunque creo que se puede con los FRAMES que he estado mirando. Saludos!!! Gracias por responder.

[HackID1]

Ya esta solucionado. en concreto se puede usando FRAMES de HTML.

Posteo la solución si alguien más la quiere o sirve en el futuro.

Primero creamos una página web llamada frame1.html.
En esta almaceno el siguiente código HTML.

Código HTML:

<HTML>
<HEAD><TITLE> Mi titulo </TITLE></HEAD>
<FRAMESET ROWS=8%,* frameborder="no" >
    <!-- Para no permitir redimensionar el frame usar. NORESIZE dentro de el.-->
   <FRAME name="reproductor" NORESIZE SRC="reprod_cancion.php">
        
     <NOFRAMES>
         <BODY>
             Su visualizador no soporta frames. Pulse 
             <A HREF="indice.htm">aqui </A> para volver.
         </BODY>
    </NOFRAMES>
    <FRAMESET ROWS=100%,*>
           <FRAME SRC="index.php">
        </FRAMESET>
</FRAMESET>
</HTML>
 

Esto divide la pantalla en 2 FRAMES
El primero ocupará 8% de la pantalla mientras el resto es * (que significa el resto de % de la pantalla es decir 92%).

En el FRAME que ocupa 8% llamado.

Código HTML:

<FRAME name="reproductor" NORESIZE SRC="reprod_cancion.php">
 

Aquí es donde mostraré las canciones a reproducir para permitir escucharla y además seguir navegando en las páginas de mi sitio.

Lo único que hay que hacer es añadir a todos los link <a> </a> de tu sitio web lo siguiente.

Código HTML:

target="reproductor"
 

Es decir si tenemos un enlace como este:

Código HTML:

<a href="'.$row['urldir'].'">
        <img src="http://localhost/musica1/musicas/paginas/img/boton_play.png">
        </a>
 

Debe quedar de la siguiente forma para que se abra esa ventana en la parte superior de la pantalla.

Código HTML:

<a href="'.$row['urldir'].'" target="reproductor">
        <img src="http://localhost/musica1/musicas/paginas/img/boton_play.png">
        </a>
 

En la opción TARGET="". Debemos colocar el name del FRAME creado, de esta forma se abren las páginas en esta parte de la web.

Un saludo !! Tema solucionado espero les sirva.

[pzin]

Lamento decirte que el tema no está solucionado.

Hace años que el uso de los marcos está obsoleto. De hecho puede ser que tuvieses problemas con que no funcionen en un futuro a corto plazo porque en HTML5, como digo, está totalmente fuera de la especificación.

Hoy en día, lo más así sería usar AJAX para cargar el contenido de la página sin refrescarla. De hecho seguramente sea o es el futuro. Así lo hacen las redes sociales más grandes (Facebook, Google+…) y hasta frameworks ya vienen por defecto así (los turbolinks de Rails).

[Rafael]

Concuerdo con Pzin la solución es del pasado más que del futuro.

La premisa es diferente,
"¿Cómo puedo dejar la música todo el tiempo, cuando cambie la página?", hay que cambiarla a:
"La música corre todo el tiempo, ¿cómo cargo el contenido nuevo? y ahí la respuesta es ajax.

[HackID1]

Gracias a ambos por la respuesta, bueno en comienzo me vale porque es para presentar un proyecto de fin de curso.
Pero me gustaría saber sobre como hacer esto en Ajax, algún manual de referencia que conozcan?, o temas específicos para lo que quiero conseguir.

He dado poco de Ajax por no decir nada, y si me gustaría entrar más en ese mundo, lo que no se en que se diferencian con JQuery porque creo muchas cosas son iguales, como que los 2 tratan elementos en tiempo real, o no??.

Gracias si conocen algún manual bueno o tema relacionado con esto lo agradezco, sino buscare por Google apenas pueda.

:)

[pzin]

Iniciado por HackID1

He dado poco de Ajax por no decir nada, y si me gustaría entrar más en ese mundo, lo que no se en que se diferencian con JQuery porque creo muchas cosas son iguales, como que los 2 tratan elementos en tiempo real, o no??.

JavaScript es un lenguaje, jQuery es una librería JavaScript para simplificar cosas y hacerlo más cross-browser y AJAX es una técnica en JavaScript para cargar contenido de forma asincrónica.

Y Java no es JavaScript. Ya por decirlo que no quede...