Advertisement
  1. Code
  2. PhoneGap

Crea un reproductor de audio con PhoneGap: Configuración de la aplicación

Scroll to top
Read Time: 15 min

Spanish (Español) translation by steven (you can also view the original English article)

No es necesario utilizar tecnologías específicas de la plataforma para desarrollar aplicaciones potentes y atractivas. Esta serie te enseñará cómo crear una aplicación híbrida, específicamente un reproductor de audio, utilizando tecnologías web y frameworks como jQuery Mobile y Cordova (también conocido como PhoneGap). El primer framework se utilizará para crear la interfaz, mientras que varias de las API del segundo, como Media y File, se utilizarán para desarrollar la lógica del negocio.


Descripción general de la serie


Las características del proyecto

La aplicación que comenzaremos a desarrollar en unos momentos será un reproductor de audio básico llamado Reproductor de Audio Audero. Tendrá requisitos de utilidad mínimos. Esta aplicación buscará en el sistema de archivos y recopilará los archivos de audio, que el usuario podrá escuchar. La aplicación recopilará archivos con cualquiera de las siguientes extensiones: .mp3, .wav, .m4a. Ten en cuenta que los formatos admitidos dependen en gran medida de la plataforma desde la que ejecutas la aplicación, así que elige formatos que funcionen en muchas plataformas.

El reproductor de audio Audero también permite al usuario actualizar la lista en cualquier momento para incluir otros archivos que puedan haber descargado después de ejecutar la operación por primera vez. El usuario también puede eliminar cualquier audio no deseado de la lista haciendo clic en el icono en el lado derecho del nombre del audio. La lista está ordenada alfabéticamente con separadores de letras para organizar y agrupar los elementos de la lista. La lista también tiene un cuadro de búsqueda para filtrar los archivos.

Puedes ver la página descrita mirando la captura de pantalla a continuación:

Audio files listAudio files listAudio files list

Una vez que el usuario elige un archivo, se mostrará el controlador del reproductor. El controlador muestra el nombre del archivo, la ruta de ubicación, el tiempo de reproducción y la duración. Incluye botones para reproducir/pausar, detener y un control deslizante para mover el audio hacia adelante y hacia atrás.

Puedes ver la apariencia del reproductor en la foto a continuación:

The Application player interfaceThe Application player interfaceThe Application player interface

Tecnologías involucradas

La siguiente lista te dará una comprensión detallada de lo que utilizaremos:

  • HTML: Se utilizará para crear el marcado de las páginas. Cuando sea apropiado, usaré algunas de las nuevas etiquetas HTML5.
  • CSS: La mayoría de las mejoras de CSS serán realizadas por jQuery Mobile, por lo que solo usaré unas pocas líneas de código CSS personalizado. Se utiliza principalmente para el propio reproductor.
  • JavaScript: Este es el lenguaje que utilizaré para desarrollar la lógica del negocio.
  • jQuery: Usaré jQuery principalmente para seleccionar elementos y adjuntar controladores de eventos.
  • jQuery Mobile: Se utilizará para mejorar la interfaz de la aplicación y optimizarla para dispositivos móviles. Algunos de los widgets utilizados incluyen Listview, Dialog y Slider. También pondré algunos botones dentro del encabezado y pie de página de las páginas para construir una barra de herramientas simple. La versión utilizada es 1.3.0.
  • Cordova (PhoneGap): Cordova se utilizará para empaquetar los archivos para que puedas compilarlos como si crearas una aplicación nativa. Para construir el Reproductor de Audio Audero, aprovecharemos varias de las API que ofrece el framework, como Storage, InAppBrowser, Notification, File y Media. La versión utilizada es la 2.3.0.

Además de la lista anterior, usaré también estas API de Cordova:

  • API de archivos: Una API para leer, escribir y navegar por las jerarquías del sistema de archivos, proporciona un conjunto de objetos para trabajar con archivos y directorios. Por ejemplo, usaremos el objeto DirectoryReader para navegar por el sistema de archivos, usando su método readEntries(), y buscaremos los sonidos. También usaremos el objeto LocalFileSystem para obtener los sistemas de archivos raíz del dispositivo usando su método requestFileSystem(). Puedes encontrar más información en la documentación oficial de la API de archivos.
  • API InAppBrowser: Es un navegador web que se muestra en tu aplicación cuando usas la llamada window.open. No es mucho más que eso, pero, como descubrirás más adelante en este artículo, administrar correctamente los enlaces externos con esta API es de vital importancia. Si deseas leer más sobre los métodos que ofrece esta API, puedes consultar la documentación oficial de InAppBrowser.
  • API de almacenamiento: Esta API proporciona acceso a las opciones de almacenamiento del dispositivo. Usaremos específicamente la implementación de Cordova de la API de almacenamiento web y sus métodos para almacenar y cargar la lista de archivos de audio. En caso de que necesites una explicación detallada, consulta la documentación de la API de almacenamiento local.
  • API de Multimedia: El objeto Media brinda la capacidad de grabar y reproducir archivos de audio en un dispositivo. Esta es una API clave para nuestro reproductor y usaremos casi todos sus métodos. Por ejemplo, usaremos el método play() para reproducir los audios, el método stop() para detener la reproducción del audio y el método getDuration() para obtener la duración del archivo procesado actual. Puedes encontrar más información sobre este tema en la documentación de la API Media.
  • API de notificaciones: Te permite notificar al usuario con notificaciones visuales y sonoras. Usaremos su método alert() para notificar al usuario en caso de errores. Para obtener una descripción general más detallada de esta API, lee la documentación de la API de notificaciones.

Antes de continuar con nuestro tutorial, quiero enfatizar que Cordova usa un archivo JavaScript diferente para cada sistema operativo. Por lo tanto, si deseas compilar la aplicación por tu cuenta, deberás utilizar un paquete IDE-SDK específico. Por ejemplo, si deseas crear la versión de Android de nuestro reproductor (creando así el .apk relativo), deberías utilizar Eclipse y el SDK de Android. El uso de diferentes paquetes para cada plataforma puede ser problemático, por lo que el reproductor de audio Audero se desarrollará asumiendo que la compilación se realizará utilizando el servicio en la nube de Adobe, llamado Adobe PhoneGap Build. Este servicio incluirá la biblioteca Cordova correcta para cada plataforma en el momento de la compilación.


La estructura del proyecto

La estructura del proyecto será bastante sencilla. Para comenzar a compilar el reproductor, crea una carpeta y cámbiale el nombre a "audero-audio-player". Ahora, crea tres carpetas dentro de esta carpeta con los siguientes nombres: css, images y js. Una vez que hayas hecho esto, descarga las librerías jQuery (usaré la versión 1.8.3) y jQuery Mobile (versión 1.3.0). Mueve jQuery y el archivo JavaScript de jQuery Mobile dentro de la carpeta "js", y luego coloca el archivo CSS de jQuery Mobile en la carpeta "css". Finalmente, coloca las imágenes empaquetadas de jQuery Mobile en la carpeta "images". Debido a que hemos cambiado ligeramente la estructura nativa de jQuery Mobile, necesitamos ajustar las rutas que apuntan a las imágenes dentro de tu archivo CSS. Específicamente, necesitamos reemplazar la parte "images/" con esta cadena "../images/". Si estás utilizando una función automatizada del editor que elegiste, verifica que hayas reemplazado la cadena cinco veces.

Ahora que has configurado el framework, puedes continuar con el siguiente paso. En la raíz de la carpeta del proyecto, crearemos los archivos HTML y colocaremos el icono de la aplicación predeterminada, el archivo de configuración de Adobe PhoneGap Build y la pantalla de presentación predeterminada. En este tutorial también crearemos los siguientes archivos:

  • index.html: Este es el punto de entrada de la aplicación y donde colocaremos los enlaces a las librerías utilizadas, dentro de la sección <head>.
  • files-list.html: Esta es la página donde tendrás una lista de los sonidos almacenados en tu dispositivo, agrupados como expliqué en la introducción de este artículo. Como verás más adelante, también tendrás una pequeña barra de herramientas que te permitirá volver a la página de inicio (el botón en la esquina superior izquierda) y actualizar la lista de sonidos (el botón en la esquina superior derecha) .
  • player.html: Esto simplemente contiene el marcado del reproductor de audio.
  • aurelio.html: Esta es la página de créditos de la aplicación; contiene información sobre el autor de la aplicación.
  • style.css: Este archivo contiene las pocas líneas personalizadas de CSS que utiliza la aplicación, que se utilizan principalmente para diseñar los botones del reproductor.
  • jquery.mobile.config.js: Esto contendrá nuestra configuración personalizada para el framework jQuery Mobile.
  • appFile.js: Este archivo contiene la clase llamada AppFile que usaremos para administrar los sonidos. Actúa como una interfaz para la tabla de archivos de nuestra base de datos. Esta clase también nos permite obtener y editar información de audio, además de permitirnos agregar y eliminar archivos de la lista almacenada.
  • player.js: El archivo que incluye la clase, llamado Player, que administra el reproductor y restablece la interfaz del reproductor.
  • utility.js: Estas son solo algunas de las funciones de utilidad utilizadas por nuestro proyecto, que explicaré con más detalle en el próximo artículo de la serie.
  • application.js: Esto es como un pegamento que fusiona todas las piezas de nuestro proyecto. Esta clase es responsable de inicializar el comportamiento de las páginas descritas antes de adjuntar eventos usando las clases vistas hasta ahora.
  • config.xml: Este archivo XML tendrá los metadatos de la aplicación y será utilizado por el servicio en la nube de Adobe para almacenar configuraciones como el número de versión de la aplicación y su descripción.

Esto es mucho para crear, pero te prometo que lo pasarás bien con este proyecto. Como nota final, además de los archivos enumerados, el reproductor de audio Audero incluirá algunas imágenes adicionales, como los botones reproducir/pausa y detener, que se colocarán en la carpeta "images".


La página de inicio

jQuery Mobile cargará todas las páginas usando AJAX, por lo que, a menos que crees configuraciones personalizadas explícitas, todos los archivos necesarios para el reproductor de audio Audero, como los archivos CSS y JavaScript, deben cargarse en el punto de entrada, index.html. Esta página, además de ser el título y la descripción de la aplicación, tiene un botón para acceder a la lista de sonidos. También incluye un pie de página con un botón para acceder a la información del autor.

La fuente completa de la página de inicio se muestra a continuación:

Como verás en la siguiente sección, los botones dentro de las etiquetas <header> y <footer> usan el atributo data-iconpos="notext". Este atributo es muy importante para lograr el efecto que deseo: Un diseño adaptable. El atributo citado le dice a jQuery Mobile que oculte el texto del enlace, lo cual es muy útil para ahorrar espacio para pantallas más pequeñas. En la siguiente sección, demostraré cómo adjuntar un controlador a pagebeforecreate y los eventos de cambio de orientación orientationchange para que podamos probar el tamaño de la pantalla. Si te encuentras una pantalla lo suficientemente grande, el atributo se eliminará y se mostrará el texto. En este caso, "suficientemente grande" significa que el ancho de la pantalla es superior a 480 píxeles.

Los lectores observadores también pueden haber notado las dos líneas de JavaScript justo encima del <body>. Ignora esto por el momento; profundizaremos en su significado más tarde.

Esta captura de pantalla te dará un ejemplo de cómo se verá la página:

Audero Audio Player homepageAudero Audio Player homepageAudero Audio Player homepage

La página de lista

Esta pequeña página, llamada files-list.html, tiene un par de widgets interesantes como el divisor automático autodivider y el cuadro de búsqueda. Esos widgets los crea jQuery Mobile simplemente agregando un par de atributos a la etiqueta <ul id="files-list">: data-autodividers="true"data-filter="true". Ya has visto cómo aparece esta página en una sección anterior y deberías haber notado que cada elemento de la lista tiene una gran "X" en el lado derecho. Este es el botón que permite al usuario eliminar el archivo de la lista y la base de datos. Estos dos elementos son un efecto estándar logrado con jQuery Mobile. Puedes leer más sobre ellos en la página de la documentación oficial.

La última pieza de código que vale la pena discutir es el elemento <div id="waiting-popup">. Esto se muestra cuando el código excava en las carpetas del sistema operativo para buscar sonidos. Buscar audio es una operación bastante pesada e incluso mi dispositivo (un Galaxy S3) sufrió, bloqueando todo el software. Una mejor solución para este problema sería utilizar subprocesos múltiples. De esta manera, mientras la aplicación busca archivos, el usuario aún puede reproducir. Desafortunadamente, como sabrás, JavaScript no tiene capacidades de subprocesos múltiples, y no hay nada que puedas hacer para cambiar eso. Otra solución podría ser mostrar el cargador durante este proceso, pero este enfoque también falló; se congeló por completo. Por esta razón, elegí bloquear completamente la interacción del usuario con un diálogo que solo se puede cerrar con programación.

Ahora que estás plenamente consciente de los puntos clave de esta página, puedo enumerar la fuente completa:


La página del reproductor

La página del reproductor (player.html) no tiene muchos hechos interesantes que señalar. Es un conjunto de etiquetas y enlaces con eventos adjuntos para administrar el sonido. El único elemento que vale la pena mencionar es el control deslizante utilizado para mover el audio hacia adelante y hacia atrás, creado con el widget de control deslizante de jQuery Mobile.

Puedes ver el código de la página a continuación:


La página de créditos

La página aurelio.html es seguramente la menos importante, y además es muy sencilla. No obstante, quiero mencionar dos cosas. El primero es el uso de dos nuevas etiquetas HTML5, <figure> y <article>. El elemento <figure> representa una unidad de contenido, con un título opcional que es autónomo. El título descrito se proporciona mediante el elemento <figcaption>. El elemento <article> representa un componente de una página que consta de una composición autónoma en un documento, página, aplicación o sitio.

El segundo es el uso del atributo target="_blank" que se aplica a todos los enlaces de listas de contactos en la página. Este atributo es muy común. Sin embargo, en nuestro reproductor, lo usaremos para adjuntar un controlador a todos los enlaces externos, como aprenderás en la siguiente parte de esta serie.

El código completo de aurelio.html se muestra a continuación:


Parte siguiente

En la segunda entrega de esta serie, analizaremos en profundidad la lógica del negocio de la aplicación al observar los archivos JavaScript que impulsan nuestro reproductor.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.