Inicio > Herramientas > Streaming Audio - MP3

Streaming Audio - MP3

Muchas veces, nuestro hosting nos dice que permiten streaming de audio pero no nos explican cómo tenemos que hacerlo. Normalmente, todos los hosting soportan streaming, ¡pero no lo fomentan!. Esto quiere decir que no siempre ponen a tu alcance las herramientas que necesitas para poder realizar el streaming. El ISP que te provee del hosting sólo ha configurado las extensiones de los ficheros (por ejemplo el MP3 para audio) para que se descarguen en streaming.

Hay una gran variedad de aplicaciones utilizadas para streaming de Audio que son creadas en flash: suele estar instalado en todos los PC's y Adobe lo ha ido mejorando año tras año. El problema, es que no sabemos como funcionan o si se pueden utilizar libremente, incluso si nuestro sitio tiene un fin comercial.

Nosotros en nuestra Web utilizamos el componente creado por Dew, que se encuentra disponible para todos bajo la licencia Creative Commons 2.0 francesa de Reconocimiento y sin obras derivadas. Pero tiene la ventaja que se puede distribuir y utilizar libremente, incluso si tu Web tiene fines comerciales

Reproducir una canción

Para reproducir una canción, Dew nos aporta varias posibilidades

Reproductor Clásico

Lo que DEW llama reproductor clásico, viene a ser si quieres un reproductor con 1 ó 3 botones: el botón de play es común y luego elijes si quieres un botón de pausa o sólo el botón de stop. El código en ambos casos es muy similar, sólo cambia el fichero swf a utilizar. Dentro del reproductor, se muestra la información del Intérprete si es que se ha etiquetado las propiedades del fichero MP3.

Pondré el código del primer reproductor para comentarlo:

<object type="application/x-shockwave-flash" data="/ruta/dewplayer.swf?mp3=mp3/test1.mp3" width="200" height="20" id="dewplayer"><param name="wmode" value="transparent" /><param name="movie" value="/ruta/dewplayer.swf?mp3=mp3/test1.mp3" /></object>

• Atributo data de la etiqueta object: Aquí vemos apuntar a la ruta (URL relativa) donde se encuentra nuestro swf. Además habrá que pasarle el parámetro (que vienen parámetros en una URL se indica por el signo de interrogación ?) mp3=URL del MP3 a reproducir.
• Parámetro movie: El valor de este parámetro debe coincidir con el valor del atributo data
• Ancho y largo del reproductor: Ambos valores se regulan con los atributos width y height de la etiqueta objetc.

 

Dew Buble

Es un reproductor con un formato visual especial y te sirve para reproducir la canción que quieras. El código HTML para incluir lo pongo a continuación:

<object data="/ruta/dewplayer-bubble.swf" width="250" height="65" name="dewplayer" id="dewplayer" type="application/x-shockwave-flash">
<param name="movie" value="dewplayer-bubble.swf" />
<param name="flashvars" value="mp3=mp3/test1.mp3" />
<param name="wmode" value="transparent" />
</object>

Dentro del código mostrado comentar lo siguiente:

• Atributo data de la etiqueta object: Aquí vemos tener la ubicación del fichero dewplayer-bubble.swf
• Parámetro movie: El valor de este parámetro debe coincidir con el valor del atributo data
• Parámetro flashvars: el valor de este parámetro es la URL donde se cuentra la canción que quieres que se reproduzca en streaming. Tiene la forma value="mp3=URL"

Reproducir una lista de canciones

El reproductor de DEW tiene la ventaja de poder transmitir una serie de canciones, pudiendo tener visible el listado de música o no según la interfaz gráfica que elijas del reproductor de música.

Reproductor Clásico: Sin ver el listado de canciones

El reproductor clásico no te permite ver el listado de canciones; sin embargo, puedes pasar a la canción siguiente o a la anterior sin tener que esperar a que termine la canción que se está reproduciendo actualmente. En este caso, dentro del reproductor, se muestra la información del Intérprete si es que se ha etiquetado las propiedades del fichero MP3.

<object type="application/x-shockwave-flash" data="/legal/dewplayer/dewplayer-multi.swf?mp3=/legal/dewplayer/mp3/test1.mp3|/legal/dewplayer/mp3/test2.mp3|/legal/dewplayer/mp3/test3.mp3" width="240" height="20" id="dewplayer-multi">
<param name="wmode" value="transparent" />
<param name="movie" value="/legal/dewplayer/dewplayer-multi.swf?mp3=mp3/test1.mp3|mp3/test2.mp3|mp3/test3.mp3" />
</object>

Dentro del código mostrado comentar lo siguiente:

• Atributo data de la etiqueta object: Aquí vemos tener la ubicación del fichero swf. Además habrá que pasarle el parámetro (que vienen parámetros en una URL se indica por el signo de interrogación ?) mp3=URL's de los MP3 a reproducir. Se separa un fichero MP3 de otro con el separador "|". Recuerda que la URL completa no puede pasar de 256 caracteres, por lo que el número máximo de canciones estará restringido a no superar dicho valor.
• Parámetro movie: El valor de este parámetro debe coincidir con el valor del atributo data

Lista de Reproducción visible

Dentro del reproducto clásico

<object type="application/x-shockwave-flash" data="/legal/dewplayer/dewplayer-playlist.swf" width="240" height="200" id="dewplayer" name="dewplayer">
<param name="wmode" value="transparent" />
<param name="movie" value="/legal/dewplayer/dewplayer-playlist.swf" />
<param name="flashvars" value="showtime=true&autoreplay=false&xml=playlist-mp3.xml" />
</object>

Dentro del código mostrado comentar lo siguiente:

• Atributo data de la etiqueta object: Aquí vemos tener la ubicación del fichero dewplayer-playlist.swf
• Parámetro movie: El valor de este parámetro debe coincidir con el valor del atributo data
• Parámetro flashvars: En el flashvars, se pueden pasar varias variables. Las variables están pensadas para ser verdadero o falso (true/false ó 1/0)
  1. xml: Aquí va la URL relativa de donde se encuentra el XML donde se encuentran las canciones a reproducir. Si tienes duda sobre el XML, mira más abajo
  2. randomplay: Si pones randomplay=1, el reproductor selecciona aleatoriamente la canción a reproducir.
  3. showtime: Indica si quieres que se vea como transcurre el tiempo
  4. autoreplay: Si lo pones a true, se volverán a reproducir ias canciones de tu lista de reproducción

Quiero poner tambien el código del playlist original de Dew, para que podais ver que información contiene:

<playlist version="1" xmlns="http://xspf.org/ns/0/">
<title>Ounage Playlist</title>
<creator>Dew</creator>
<link>http://www.blup.fr/</link>
<info>The Best Playlist for Testing</info>
<image>covers/tracklist.jpg</image>

<trackList>

<track>
<location>mp3/test1.mp3</location>
<creator>Bedrich Smetana</creator>
<album>Má Vlast</album>
<title>La Moldau (Vltava)</title>
<annotation>I love this song</annotation>
<duration>32000</duration>
<image>covers/1.jpg</image>
<info>Información en la etiqueta INFO</info>
<link>http://fr.wikipedia.org/wiki/M%C3%A1_Vlast_(Smetana)</link>
</track>

<track>
<location>mp3/test2.mp3</location>
<creator>Antonin Dvorak</creator>
<album>La Symphonie du Nouveau Monde</album>
<title>La Symphonie du Nouveau Monde</title>
<annotation></annotation>
<duration></duration>
<image>covers/2.jpg</image>
<info></info>
<link>http://fr.wikipedia.org/wiki/Cesaria_Evora</link>
</track>

<track>
<location>mp3/test3.mp3</location>
<creator>Jean-Claude Petit</creator>
<album>Le Hussard sur le Toit</album>
<title>Le Hussard sur le Toit</title>
<annotation></annotation>
<duration></duration>
<image>covers/3.jpg</image>
<info></info>
<link></link>
</track>

</trackList>
</playlist>

Si después de esta explicación aún te quedan dudas, siempre puedes ir a la página de DEW.

Descargate los ejemplos

Si quieres puedes descargarte el software de DEW para reproducir ficheros de música y, en general, cualquier fichero MP3.

Comparte esta información: