Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. PhoneGap

Crea un AudioPlayer con PhoneGap: Logica de Aplicacion

by
Difficulty:BeginnerLength:LongLanguages:

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

Esta es la segunda parte de la serie sobre Audero Audio Player. En este artículo, vamos a crear la lógica de negocios de nuestro jugador. También explicaré algunas de las API de Cordova que se introdujeron en el artículo anterior.


Resumen de la serie


Creando el Jugador

En esta sección, te mostraré la clase llamada Player, que nos permite jugar, detener, rebobinar y avanzar. La clase se basa en gran medida en la Media API; Sin sus métodos, nuestro jugador será completamente inútil. Además de la Media API, esta clase aprovecha el método alert() de la API de notificación. El aspecto de la alerta varía según las plataformas. La mayoría de los sistemas operativos compatibles utilizan un cuadro de diálogo nativo, pero otros, como Bada 2.X, utilizan la función de alert() del navegador clásico, que es menos personalizable. El primer método acepta hasta cuatro parámetros:

  1. message: una cadena que contiene el mensaje para mostrar
  2. alertCallback: una devolución de llamada para invocar cuando se cierra el cuadro de diálogo de alerta
  3. title: el título del cuadro de diálogo (el valor predeterminado es "Alert")
  4. buttonName: el texto del botón incluido en el cuadro de diálogo (el valor predeterminado es "OK")

Tenga en cuenta que Windows Phone 7 ignora el nombre del botón y siempre usa el predeterminado. Windows Phone 7 y 8 no tienen una alerta de navegador incorporada, por lo que si desea usar alert('message');, debe asignar window.alert = navigator.notification.alert.

Ahora que he explicado las API utilizadas por Player, podemos echar un vistazo a cómo está hecho. Tenemos tres propiedades:

  • media: la referencia al objeto de sonido actual
  • mediaTimer: que contendrá un ID de intervalo único creado con la función setInterval() que pasaremos a clearInterval() para detener el temporizador del sonido
  • isPlaying: una variable que especifica si el sonido actual se está reproduciendo o no. Además de la propiedad, la clase tiene varios métodos.

El método initMedia() inicializa la propiedad media con un objeto Media que representa el sonido seleccionado por el usuario. Este último es notificado usando la Notification API en caso de error. El objetivo de los métodos playPause, stop(), y seekPosition() debe ser obvio, así que seguiré adelante. Los métodos resetLayout() y changePlayButton() son muy simples. Se utilizan para restablecer o actualizar el diseño del jugador de acuerdo con la acción realizada por el usuario. El último método restante es updateSliderPosition(), que es similar al control deslizante de tiempo. Este último tiene cero (el comienzo del control deslizante) como el valor predeterminado para la posición actual, establecido usando el atributo value="0". Esto debe actualizarse en consecuencia mientras se reproduce el sonido para proporcionar al usuario información visual sobre el tiempo de reproducción transcurrido.

Hemos descubierto todos los detalles de esta clase, así que aquí está el código fuente del archivo:


Gestionando los archivos de audio

Esta sección ilustra la clase de AppFile que se utilizará para crear, eliminar y cargar los sonidos utilizando la API de almacenamiento web Web Storage API. Esta API tiene dos áreas, Sesión y Local, pero Córdova usa esta última. Todos los sonidos se almacenan en un elemento titulado "archivos", como puede ver al observar las propiedades de _tableName.

Tenga en cuenta que esta API solo puede almacenar datos básicos. Por lo tanto, para satisfacer nuestra necesidad de almacenar objetos, utilizaremos el formato JSON. JavaScript tiene una clase para tratar este formato llamado JSON. Utiliza los métodos parse() para analizar una cadena y volver a crear los datos apropiados, y stringify() para convertir el objeto en una cadena. Como nota final, no usaré la notación de puntos de la API porque Windows Phone 7 no la admite, por lo que usaremos los métodos setItem() y getItem() para garantizar la compatibilidad con todos los dispositivos.

Ahora que tiene una visión general de cómo almacenaremos los datos, hablemos de los datos que necesitamos guardar. La única información que necesitamos para cada sonido encontrado es el nombre (propiedad name) y una ruta absoluta (propiedad fullPath). La clase AppFile también tiene una "constante", llamada EXTENSIONS, donde estableceremos las extensiones que se probarán en cada archivo. Si coinciden, el archivo será recogido por la aplicación. Tenemos un método para agregar un archivo (addFile()), un método para eliminar un archivo (deleteFile()), un método que elimina toda la base de datos (deleteFiles()) y, por último, dos métodos que recuperan el archivo la base de datos: getAppFiles() para recuperar todos los archivos, y getAppFile() para recuperar solo uno. La clase también tiene cuatro métodos de comparación, dos estáticos (compare() y compareIgnoreCase()) y dos no estáticos (compareTo() y compareToIgnoreCase()). El último método es el que se utiliza para recuperar el índice de un determinado archivo, getIndex(). La clase AppFile le permite realizar todas las operaciones básicas que pueda necesitar.

El código que implementa lo que hemos discutido se puede leer aquí:


La clase Utility

El archivo utility.js es muy corto y fácil de entender. Sólo tiene dos métodos. Uno se usa para convertir milisegundos en una cadena formateada que se mostrará en el reproductor, mientras que el otro es una implementación de JavaScript del conocido método Java endsWith.

Aquí está la fuente:


Poniendolo todo junto

Esta sección analiza el último archivo JavaScript del proyecto, application.js, que contiene la clase Application. Su objetivo es adjuntar eventos a los elementos de la página de la aplicación. Esos eventos aprovecharán las clases que hemos visto hasta ahora y permitirán que el jugador funcione correctamente.

El código de la función ilustrada se enumera a continuación:


Gestión de enlaces externos

En la parte anterior de esta serie, mencioné que un punto interesante de la página de créditos era el atributo target="_blank" aplicado a los enlaces. Esta sección explicará por qué el método openLinksInApp() de la clase Application tiene sentido.

Una vez, Cordova solía abrir enlaces externos en el mismo Cordova WebView que ejecutaba la aplicación. Cuando se abrió un enlace y el usuario hizo clic en el botón "atrás", la última página mostrada se mostró exactamente como estaba antes de que el usuario la dejara. En la versión más reciente, esto ha cambiado. Hoy en día, los enlaces externos se abren, de manera predeterminada, utilizando Cordova WebView si la URL está en la lista blanca de la aplicación. Las URL que no están en su lista blanca se abren usando la API InAppBrowser. Si no administra los enlaces de la manera correcta, o si el usuario toca un enlace que se muestra en InAppBrowser o en el sistema y luego elige volver, todas las mejoras de jQuery Mobile se pierden. Este comportamiento ocurre porque los archivos CSS y JavaScript se cargan en la página principal, y los siguientes se cargan con AJAX. Antes de descubrir la solución, echemos un vistazo a lo que es el InAppBrowser.

"El InAppBrowser es un navegador web que se muestra en su aplicación cuando usa la llamada window.open".

Esta API tiene tres métodos:

  • addEventListener(): le permite escuchar tres eventos (loadstart, loadstop, y exit) y adjuntar una función que se ejecuta tan pronto como se activan esos eventos
  • removeEventListener(): elimina un agente de escucha adjunto anteriormente.
  • close(): se utiliza para cerrar la ventana InAppBrowser.

Entonces, ¿cuál es la solución? El objetivo de la función openLinksInApp(), junto con la lista blanca especificada en el archivo de configuración, es capturar los clics en todos los enlaces externos reconocidos usando el atributo target="_blank", y abrirlos usando window.open() método. Con esta técnica, evitaremos el problema descrito y nuestro jugador continuará luciendo y trabajando como se espera.


Parte siguiente

En la tercera y última entrega de esta serie, veremos los últimos archivos restantes para que pueda completar el proyecto y jugar con él.

Advertisement
Advertisement
Advertisement
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.