Reproductor Streaming con SoundManager2

Si estas pensando en hacer un reproductor de radio online, este tutorial te va a servir. ¡Te lo aseguro!

Una de las cosas que más me gustan de Internet es que es posible ayudar a otros a través de tutoriales. El día de ayer, un amigo de Perú me comentó que no pudo lograr reproducir una radio online con el tutorial de Sound Manager 2. Es por eso que quise escribir este tutorial resumido para quienes necesiten hacer lo mismo que nuestro amigo Max.

Punto de partida: El Tutorial Anterior

El resultado del tutorial anterior fue un reproductor como este:

Pero este reproductor no está hecho para que funcione con streamings. ¿Cómo hacemos que un reproductor de mp3 funcione con una fuente de radio online?

La respuesta está en la documentación del SoundManager2. Particularmente en la sección del SoundObject.

Los parámetros

Según la documentación, los siguientes parámetros son los que determinan si la fuente del audio es un archivo de audio o un servicio de streaming.

soundManager.createSound({
  id: 'mySound',
  serverURL: 'rtmp://localhost/rtmpDemo/', // RTMP server
  url: 'mysong.mp3' // path to stream
}).play();

En este ejemplo encontramos:

  • serverURL que corresponde a la url fuente del servicio de streaming
  • url que corresponde al recurso que vamos a reproducir. Este parámetro también puede ser un objeto con los atributos type y url.

Es importante destacar que en la documentación también se especifica que el único protocolo compatible con SoundManager es el RTMP. Que es un protocolo para procesos en tiempo real (según definición).

La Configuración del Streaming

Para nuestro ejemplo, usaremos una radio de Perú que nuestro amigo Max quería reproducir.

Para reproducir radios debemos considerar que nuestra fuente utiliza le protocolo RTMP. Si tienes un formato AAC, revisa al final del tutorial

Esta radio es local en Perú y se llama Radio Amor. La configuración es la siguiente:

  • URL de Servidor: rtmp://149.56.16.148:1935/radioz/
  • Recurso: radioamor.stream
  • Formato: Audio MP4

Considerando estas configuraciones, el SoundObject debe configurarse así:

soundManager.createSound({
    id: "radiostream",
    serverURL: "rtmp://149.56.16.148:1935/radioz/",
    url: [{
        type: "audio/mp4",
        url: "radioamor.stream"
    }]
});

Acá definimos el recurso en base a la configuración y agregamos un id para poder acceder al reproductor desde el SoundManager.

Por otra aparte, para que el reproductor pueda ser puesto en marcha y no tengamos problemas de reproducción, también debemos considerar la siguiente configuración del SoundManager:

soundManager.setup({
        debugMode: false,
        flashLoadTimeout: 0,
        flashVersion: 9,
        preferFlash: true,
        useHighPerformance: true,
        waitForWindowLoad: false,
        url: '/ruta/al/directorio-swf',
        onready: function(){
           // acá se agrega el método "createSound" de SoundObject
        …

En este punto, detectamos que hay configuraciones relacionadas a los objetos Flash, que son los archivos que SoundManager utiliza para reproducir streaming. Si no se agregan ni definien los archivos SWF y no se define la url donde éstos se encuentran, el streaming no va a funcionar.

El resultado

Al unir todo lo que hemos descrito, el reproductor resulta del siguiente modo:

Pero por cosas del destino, JSFiddle no es capaz de reproducir la radio porque no puede cargar el archivo swf que necesita. así que subi el script a mi servidor y se ve así:

Conclusiones

A pesar de que JSFiddle (por temas de seguridad) no cargó el SWF, el ejemplo fue posible realizarlo con toda la versatilidad que tiene SoundManager2.

Una pregunta común que nos podemos hacer es ¿qué hacer cuando el streaming no es RMTP? La respuesta es simple: HMTL5 Audio, pero esto es harina de otro costal.

Espero que les sirva este ejemplo, tanto como le sirvió a nuestro amigo Max.

Saludos y Compartan si les gustó. ¡No olviden seguirme en mis redes sociales!

Blog, Tutorial, Tutorial Javascript
2 minutos