Airtime 2.5 para estaciones de radio
Reproductor de transmisiones para tu sitio web
Si estás usando Airtime para transmisiones web, puedes agregar un applet de reproductor a tu página. jPlayer es un applet (disponible bajo el GNU GPL de http://jplayer.org/) que usa la función de etiqueta <audio> de HTML5 para reproducir tus transmisiones. Si el buscador de tu oyente no funciona con HTML5, el applet recurre a Adobe Flash. Los buscadores propietarios, como Internet Explorer en Windows o Safari en Apple OS X, podrían ser incompatibles con transmisiones Ogg Vorbis. Los oyentes que no desean instalar un buscador con soporte para Ogg Vorbis (como Mozilla Firefox, Google Chrome u Opera) pueden escuchar las señales con un reproductor separado como VideoLAN Client, también conocido como VLC (http://www.videolan.org/vlc/).
Código de ejemplo
Puedes desacargar el código de ejemplo de este capítulo en:
http://en.flossmanuals.net/airtime-en-2-0/index/_booki/airtime-en-2-0/static/jPlayer_demo2.zip
Extrae la carpeta en tu computadora, luego abre el archivo jplayer-demo.html en tu editor:
nano jplayer-demo.html
Nos enfocaremos en las dos áreas más importantes. Primero, en la etiqueta <head> del documento, donde verás un código similar a este:
$(document).ready(function(){
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
oga: "http://localhost:8000/airtime_128"
}).jPlayer("play");
},
ended: function (event) {
$(this).jPlayer("play");
},
swfPath: "js",
supplied: "oga"
});
});Este código carga jPlayer y especifica la fuente de transmisión de Airtime. La locación de transmisiones http://localhost:8000/airtime_128 funciona si estás probando jPlayer directamente en el servidor de Icecast al que se conecta Airtime. Al probar un servidor remoto, debes cambiar esta locación por la dirección de IP o nombre de dominio, número de puerto y punto de montaje del servidor de Icecast que estás usando.
En cuanto termina de cargarse jPlayer, comenzará la reproducción automáticamente. Los parámetros ready, ended, swfPath y supplied son argumentos que pasan a jPlayer. La lista completa de argumentos constructores está disponible en la jPlayer Developer Guideen http://www.jplayer.org/latest/developer-guide/
Controles de jPlayer
Luego, la etiqueta <body> del archivo jplayer-demo.html define los controles que aparecerán en jPlayer. Estos controles pueden incluir un simple botón de Reproducir/Pausa, o una interfaz de reproducción completa con lista, barra de progreso y control de volumen. Este código de ejemplo usa una de las máscaras más simples disponibles para jPlayer, Blue Monday.
Un botón de pausa o una barra de progreso no son útiles cuando se está transmitiendo continuamente desde Icecast, así que podemos eliminar estas etiquetas del código de ejemplo, así como las etiquetas que especifican el tiempo de reproducción y duración del archivo. El HTML simplificado crea un botón de reproducción/pausa y un botón de silencio, y se ve así:
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div class="jp-audio">
<div class="jp-type-single">
<div id="jp_interface_1" class="jp-interface">
<div class="label">Airtime Radio! 99.9 FM</div>
<ul class="jp-controls">
<li><a href="#" class="jp-play" tabindex="1">play</a></li>
<li><a href="#" class="jp-pause" tabindex="1">pause</a></li>
<li><a href="#" class="jp-mute" tabindex="1">mute</a></li>
<li><a href="#" class="jp-unmute" tabindex="1">unmute</a></li>
</ul>
</div>
<div id="jp_playlist_1" class="jp-playlist"></div>
</div>
</div>
Cuando abras e archivo HTML jplayer-demo.html en un buscador, tu reproductor aparecerá así:
La versión original de este código de demo y la máscara de diseño están disponibles en http://jplayer.org/download/ para mayor experimentación.