Hoy en día muchos usuarios necesitan crear una App de tipo Radio por sus estación de radio online o con listas de reproducción de música.
Mobincube ofrece esta útil opción y en este tutorial vamos a ver cómo crear una App de tipo radio y cómo utilizar algunos proveedores de streaming para hacer eso.
En Internet tenemos disponibles miles de Proveedores de Radio en línea que se pueden utilizar con el fin de crear una Radio en Streaming.
A continuación tenemos algunos ejemplos:
El segundo paso es grabar el contenido offline usando por ejemplo:
FORMATO DE AUDIO Y PROTOCOLOS
Es muy importante conocer el FORMATO DE AUDIO y de los PROTOCOLOS soportados por Mobincube:
Los FORMATOS compatibles son: MP3 – AAC – Vorbis (H. 264/ VP8)
Los PROTOCOLOS soportado son: Http - RTP (Real Time Protocol) y RTSP o Real Time Streaming Protocol (este último no es soportado por iOS, así que asegurémonos de que se está utilizando un protocolo HTTP para que sea compatible con iOS).
MOBINCUBE Y STREAMING
Vamos a ver cómo utilizar cada funcionalidad en nuestras Apps.
En Mobincube tenemos 3 formas de utilizar audio en nuestras Apps:
PLAYER
La acción player nos permite asociar a cualquier elemento una URL que será abierta por el reproductor de audio del dispositivo.
Si asignamos la acción PLAYER a un botón de nuestra aplicación, cuando el usuario haga clic en el botón, con la acción "player" asociada, nuestro sistema desplegará una lista de aplicaciones entre las que podemos elegir cual queremos que reproduzca el archivo de audio
Esto funciona según el sistema operativo y el reproductor.
Podemos insertar urls como:
HTTP (con la dirección de streaming de audio)
RSTP (no es compatible con iOS)
PLAY - STOP
Estas acciones nos permiten abrir un archivo de audio local o en streaming dentro de la misma App.
Lo que tenemos que hacer es insertar el recurso online, en formato MP3, en el destino de la acción PLAY y STOP y tendremos que permitir a Mobincube de validarlo, abriendo el Gestor de Recursos y subiendo el recurso de streaming de audio ahí.
Si tenemos una lista de reproducción con un formato diferente, por ejemplo, tipo text. , tendremos que usar un truco para que funcione. Podemos abrir este archivo en el editor de texto y buscar la URL del archivos mp3, compatible con el Gestor de Recursos. Podemos copiar y pegar este contenido en el Gestor de Recursos como recurso online y subir el archivo en el destino de la acción Play y Stop.
REACCIÓN AL MINIMIZAR O CAMBIAR PANTALLA
Es muy importante conocer las diferentes reacciones de la App al utilizar las diferentes acciones: Player o Play.
Cuando usamos la acción PLAY, esta nos permitirá escuchar el audio en segundo plano, incluso si minimizamos o cambiamos pantalla de la App.
Para apagar el audio tendremos que utilizar un botón STOP o salir completamente de la App.
Con la acción PLAYER podemos controlar la música y navegar por la aplicación sin escuchar la música de fondo. Esto significa que, si cerramos o navegamos por la App, el audio se apagará.
CÓMO CREAR UNA APP DE TIPO RADIO PASO A PASO
Ahora vamos a ver, paso a paso, cómo crear una App de tipo Radio con Mobincube.
En el siguiente ejemplo vamos a crear una pantalla SPLASH como presentación de la Radio App que enviará a los usuarios, en unos milisegundos, a otra pantalla (en nuestro ejemplo a la pantalla Mainscreen).
En la pantalla Main screen hemos insertado una IMAGEN DE CABECERA, un ELEMENTO IMAGEN en el cuerpo de la pantalla y una BARRA DE MENÚ con 4 ICONOS.
Asignamos una acción a cada icono:
INFO: asignaremos a este icono la acción: "abrir pantalla", y como destino indicaremos la pantalla detalle: "INFO", como en la siguiente imagen.
PLAY: asignaremos a este icono la acción: "abrir pantalla", y como destino indicaremos la pantalla detalle: "PLAY", como en la siguiente imagen.
WEB: asignaremos a este icono la acción: "abrir pantalla", y como destino indicaremos la pantalla tipo WEB: " WebStreaming ", como en la siguiente imagen.
CONTACT: asignaremos a este icono la acción: "Ir a URL", y como destino vamos a escribir el siguiente script: mailto:[email]?subject=[subject]&body=[content]
(Tendrás que sustituir el email por la dirección a la cual quieres que se envíe el correo, el asunto puedes introducir el que quieras. Lo mismo sucede con el contenido, puedes establecer un contenido por defecto escribiéndolo o dejar que el usuario lo escriba. En el caso que no quieras un contenido por defecto, elimina el '&body='
Recuerda que debes quitar los corchetes []. Estos son sólo indicativos. )
De esta forma, cuando el usuario pulse el botón, será capaz de enviar un correo electrónico, como en la siguiente imagen.
Ahora vamos a diseñar la estructura de las otras 3 pantallas: INFO, PLAY, WebStreaming.
PANTALLA INFO:
En la pantalla INFO vamos a insertar los siguientes elementos:
1 Imagen de Cabecera
1 Elemento Texto con la descripción de nuestro Canal de Radio
1 Barra de Menu
Como se puede ver en la imagen previa, tenemos la misma barra de menú de la pantalla Main screen, pero esta barra tiene un color diferente para el icono INFO. Lo que hicimos fue clonar la barra de menú Main screen y dar un color de fondo al icono, relacionado con la pantalla que estamos utilizando (en este caso el icono INFO). Así que el usuario sabrá que está en la pantalla Info (vamos a hacer lo mismo para las otras barras para arrastrarlas a las otras pantallas).
PANTALLA PLAY:
Estamos ahora en la pantalla detalle PLAY.
En la pantalla PLAY vamos a insertar los siguientes elementos:
1 Imagen de Cabecera
1 Una Tabla con 2 iconos
1 Elemento Texto
1 Barra de Menu
Vamos a asignar una acción a los 2 iconos subidos en la tabla:
Vamos a asignar la acción "PLAY" al botón Play y como destino subiremos un archivo de audio mp3 desde el Gestor de Recursos.
Vamos a asignar la acción "STOP" al botón Stop y como destino subiremos el mismo archivo de audio mp3 desde el Gestor de Recursos.
De esta forma el usuario podrá reproducir los archivos de audio subidos y apagarlos cada vez que quiere.
En el siguiente ejemplo vamos a ver cómo utilizar la acción PLAYER.
Para enlazar las pantallas de la App, vamos a asignar al elemento texto de la pantalla PLAY la acción: "abrir pantalla" y como destino vamos a crear una nueva pantalla detalle: "PLAYER", como en la siguiente imagen.
PANTALLA PLAYER:
Vamos a abrir la pantalla PLAYER para diseñar la estructura.
En la pantalla PLAYER vamos a insertar los siguientes:
1 Imagen de Cabecera
1 Elemento Imagen en el centro del cuerpo de la pantalla
1 Barra de menú
Vamos a asignar al elemento Imagen la acción " PLAYER" y como destino vamos a insertar la URL del streaming de la Radio.
De esta forma, cuando el usuario pulse el botón, la url del streaming de la Radio se abrirá a través de las aplicaciones multimedia de su dispositivo, asociados a los streams de audio y se podrá elegir uno de ellos para reproducir el archivo de audio.
PANTALLA WEB:
Vamos a ver otra funcionalidad que nos permite incrustar el contenido de la Radio en Streaming en nuestra aplicación. Utilizaremos la pantalla Web en la que incrustar el contenido de la App, para que los usuarios puedan escuchar la música dentro de la propia App, sin salir de la aplicación.
En esta pantalla hemos arrastrado la Barra de Navegación.
Ahora podemos usar 2 opciones:
1. Insertar la URL del streaming, como con la acción Player. De esta forma, cuando el usuario tendrá una conexión a Internet, podrá escuchar el streaming.
2. Si tenemos el Código de un Web Player, obtenido a partir de una radio web, podemos pegar el código en el cuerpo de un HTML y subirlo dentro de un archivo ZIP, para poder navegar cuando el dispositivo no tenga acceso a internet.
El fichero ZIP debe contener un index.html que la App va a utilizar para iniciar la navegación de la web.
En este ejemplo vamos a copiar el código Player desde una página Web:
Luego abriremos o crearemos un index.html y pegaremos el código copiado en el cuerpo del HTML, como en el siguiente ejemplo:
Finalmente tendremos que comprimir el archivo en un Zip y subirlo en la pantalla Web.
CUANDO SE CREA UNA APP DE TIPO RADIO SE PUEDEN UTILIZAR TODAS LAS FUNCIONALIDADES MENCIONADAS O ELEGIR LA QUE MEJOR SE ADAPTE A TUS NECESIDADES.
AHORA EMPIEZA A CREAR TU PROPIA RADIO APP ¡Y A DISFRUTAR!
Más en: “Como crear una App de tipo Radio”