Hoy voy a hacer un post ligerito. Ligerito como el reproductor flash de mp3 niftyPlayer.

Simplemente se trata de un reproductor de mp3, hecho con la tecnología flash, listo para integrarse en una web. Además podemos interactuar con él de forma muy sencilla via JavaScript.

Cómo usarlo

Una vez hayamos descargado los archivos necesarios, sólo hay que insertar este código en nuestro documento web:

Lo único que tenemos que editar es, en la segunda fila, las variables GET file y as. “file” es el nombre del archivo .mp3, y as valdrá 1 si queremos que empiece a reproducir automáticamente, o 0 (cero) de lo contrario.

Interacción JavaScript

Es realmente sencillo. Lo primero de todo es incluir en la cabecera del documento HTML esta línea:

Los métodos de que disponemos son los siguientes:

Play Toggle

Si el reproductor estaba en play, pasa a pause, y viceversa

O también Play y Pause por separado

Stop

Detiene la canción y se va al principio

Cargar nuevo archivo mp3

Si queremos cargar, y a continuación empezar a reproducirlo:

Asociar eventos del reproductor

Por ejemplo, asociamos una función nuestra al evento de comenzar la reproduccion (play)

También contamos con los eventos onPause y onStop

Obtener estado del reproductor

Devolverá un texto de entre “playing“, “stopped” y “paused“, dependiendo del estado del reproductor

Y eso es todo! Fácil, verdad? Qué te parece esta aplicación? La usarás? Para qué?
Te espero en los comentarios, ahí siempre hace buen clima n_n

Trabajar en JavaScript ha tenido siempre una gran dificultad, y es que se trata de un lenguaje no estándar, interpretado por el cliente. Esto provoca desigualdades en los resultados, dependiendo sobretodo de los distintos navegadores, y sus respectivas versiones.

En el caso de los eventos de teclado este desmadre tiene un especial énfasis, y viene a demostrarse en este documento (en inglés) que paso a resumiros.

Eventos keyup keydown y keypress

Estos eventos son disparados en momentos distintos, dependiendo del navegador. Por ejemplo el mantener pulsada la tecla “Alt”, o el pulsar un caracter durante varios segundos, producen resultados distintos en cuanto al disparo de eventos, en cada navegador.

Interpretación de la tecla pulsada

Llegados al punto de que el usuario ha pulsado una tecla, querremos saber cuál de ellas ha pulsado. Pues el resultado también difiere entre navegadores (como era de esperar).

Para complicarnos la vida a los programadores, la codificación es distinta entre los principales navegadores. Aúnque en los caracteres normales (numeros y letras) hay una cierta uniformidad, la diferenciación del lugar donde se pulsan los números (hay dos series de números en un teclado normal), y la mayoría de los signos, adquieren claves distintas que los identifican.

Echa un vistazo a la tabla de códigos más abajo.

Tablas clarificadoras

Recomiendo leer la fuente original (inglés).

Me gustaría recalcar esta técnica, ya que según mi opinión no está valorada lo suficiente.

Se trata de la carga asíncrona de archivos Javascript, es decir, no cargar un archivo JavaScript hasta que lo necesite.

¿Cómo hago esto?

Es muy sencillo, una simple función puede facilitarte increíblemente el trabajo. Es la siguiente:

Como puede apreciarse, la función crea “al vuelo” un elemento tipo script, y lo introduce en el cuerpo del documento. De esta forma no tenemos que cargar muchas librerías, o grandes archivos, hasta que no los necesitemos.

Es posible que incluso con el evento onLoad tengamos el control del instante en que se ha cargado, pero esto se atiene más a compatibilidades entre navegadores.

Este tema lo he rescatado, porque la versión 2.1 de Imaset va a tener una fuerte carga de Javascript, lo que hará que el manejo sea más rápido y llevadero, y evitará envíos AJAX innecesarios. Pero para esto debo cargar el gran fichero JS, únicamente cuando se solicite usar el plugin. De ahí su gran potencial.

Ajax sigue siendo un completo desconocido para muchos programadores web. Se habla de que es un lenguaje (no lo es, es una herramienta!) y se asocia automáticamente a la nueva generación de webs, más potentes, amigables, sociales, usables…

Ajax consiste, básicamente, en mandar mensajes (con formato XML, o texto plano) del servidor al cliente mediante una petición asíncrona por parte del cliente.

Un ejemplo: Cuando el usuario pulsa en un botón de búsqueda, se envía una petición al servidor solicitando los resultados de esta búsqueda, cuando los tiene los devuelve, y el usuario los ve en pantalla, todo sin cambiar de página.

Esto implica que para que el servidor me de información, el cliente tiene que solicitarla, es decir, al ocurrir algún evento en el lado cliente. Y aquí radica la diferencia entre AJAX y Comet (o HTTP Push), y es que Comet no requiere que el ordenador cliente solicite ninguna información, sinó que es el servidor el que decide cuándo enviar la información al cliente, de forma asíncrona.

Un ejemplo: En un sistema de mensajería instantánea, en lugar de hacer contínuos chequeos al servidor, para ver si hay nuevos mensajes, símplemente cada vez que el servidor recibe un nuevo mensaje envía esta información a las máquinas cliente.

La forma de hacer esto es mediante una conexión HTTP de larga duración, de esta forma el servidor tiene una línea contínua de comunicación con el cliente. Aquí el cliente envía información al servidor, y el servidor al cliente; pero cada uno lo hace en el momento oportuno, en lugar de viajar la información como bloque de datos en respuesta a una petición.

Para usar esta tecnología tendremos que usar alguno de los pocos frameworks que actualmente existen con soporte para Comet, por ejemplo Xaja, un framework PHP que permite este tipo de conexión, o HTTP.Push, pequeña biblioteca javascript con este tipo de llamada.

Personalmente todabía he de investigar sobre esta tecnología, porque no tengo muy claro lo de generar eventos en el servidor, o lo de que un archivo en lado servidor esté siempre disponible con el cliente.