Cómo agregar sonido a los juegos en HTML5 para dispositivos Android* basados en Arquitectura Intel®

Introducción

El sonido es uno de los componentes más importantes de los juegos interactivos. Para impresionar a los jugadores, es necesario que los juegos no solo tengan gráficos de alta calidad y una historia atrayente, sino también sonidos que produzcan gran sensación. Agregar efectos de sonido a los juegos o aplicaciones no solo los hace más entretenidos, sino que también aumenta la percepción general de su calidad.

Etiqueta de audio

Algunas de las fascinantes nuevas características de HTML 5 son las etiquetas de sonido y video. Es posible que, con el tiempo, estas etiquetas lleguen a reemplazar a las tecnologías de video populares de la actualidad. Para usar audio o video con HTML5, hay que comenzar por crear un elemento <audio> y especificar una dirección URL de origen del audio, incluido el atributo de los controles.

<audio controls><source src="horse.ogg" type="audio/ogg"><source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.</audio>

Este rasgo incluye los controles de sonido, como por ejemplo, reproducción, detención y graduación de volumen. El componente admite diferentes componentes . Los componentes se pueden conectar a diversos registros de . Los tipos MIME (también conocidos como Tipos de Medios de Internet) permiten caracterizar formatos de archivo de modo tal que el marco de trabajo sepa cómo tomarlos. Junto con el origen, hay que especificar un atributo de tipo. Este atributo le indica al programa la clase de MIME y los códecs de los elementos multimedia proporcionados antes de que los descargue. Si no se proporciona el atributo, el navegador utiliza un método experimental para intentar reconocer el tipo de medio. El explorador utilizará la configuración que identifique inicialmente, y si no reconoce el formato, optará por el predeterminado.

Método canPlayType

Afortunadamente, la API de sonido nos brinda una manera de descubrir si el navegador móvil es compatible con cierto formato determinado. Para captar el elemento de , podemos marcar nuestro elemento en HTML como se muestra a continuación:

var audio = document.getElementById('myaudio');

Otra posibilidad es generar nuestro elemento por entero en JavaScript*:

var audio = new Audio();

Una vez que tenemos el componente de sonido, ya estamos preparados para ingresar sus métodos y propiedades. Una manera de comprobar la compatibilidad del formato es emplear la técnica canplaytype, en la cual se toma como parámetro un tipo de MIME:

audio.canPlayType('audio/mpeg’);

canPlayType genera uno de tres valores:

1. probably (probablemente)
2. maybe (quizás)
3. “” (cadena vacía)

La razón de estos tipos extraños de respuestas es la anormalidad general de todo lo relacionado con los códecs. El navegador móvil puede reconocer si un códec es reproducible sin necesidad de intentar reproducirlo.

Tipos de MIME para formatos de audio

Image may be NSFW.
Clik here to view.

Atributos

Las etiquetas de HTML están compuestas por uno o más atributoso características. Se agregan atributos a las etiquetas para proporcionar al navegador datos adicionales acerca de cómo podría aparecer o comportarse la etiqueta. Las características se componen de un nombre y un valor que se diferencian mediante un signo de igual (=); con el valor entre comillas dobles. Un ejemplo sería: style "color: blue";

En la sección siguiente se describen brevemente los atributos específicos de la etiqueta/elemento <audio>.

src: indica la ubicación del archivo de audio. Su valor debe ser el URL de un archivo de audio. preload: cuando se reproducen archivos grandes, es mejor almacenar los registros en búfer. Para hacer esto, hay que usar el atributo preload. Este atributo nos permite darle una pista al navegador de que intentamos almacenar el registro en búfer antes de reproducirlo, con vistas a una experiencia óptima del cliente. Los valores posibles son:

• none (ninguno)
• metadata (metadatos)
• auto

autoplay:

Indica si comenzar o no a reproducir el sonido ni bien se ha cargado el objeto.

Se trata de un atributo booleano. Por lo tanto, la presencia de este atributo equivale a un valor verdadero. También podemos especificar un valor que coincida, con distinción de mayúsculas y minúsculas, con el nombre canónico del atributo, sin espacios en blanco anteriores o posteriores (es decir, autoplay o autoplay="autoplay").

Valores posibles:

• [cadena vacía]
• autoplay

mediagroup:

Este atributo se utiliza para sincronizar la reproducción de archivos de audio (o elementos multimedia). Nos permite especificar elementos multimedia que se deben vincular entre sí. El valor es una cadena de texto, por ejemplo: mediagroup=album. El navegador o agente del usuario vincula automáticamente los archivos de audio o elementos multimedia que tangan el mismo valor.

Un caso en el que se podría emplear es cuando se debe superponer una pista de traducción de lengua de señas de un video sobre otro.

loop:

Este atributo indica si se debe continuar con la reproducción de audio cuando ha terminado.

Es un atributo booleano. Por lo tanto, la presencia de este atributo equivale a un valor verdadero. También podemos especificar un valor que coincida, con distinción de mayúsculas y minúsculas, con el nombre canónico del atributo, sin espacios en blanco anteriores o posteriores (es decir, loop o loop="loop").

Valores posibles:

• [cadena vacía]
• loop

controls:

En lugar de reproducir sonidos de manera automática, algo no recomendable, es posible hacer que el navegador presente algunos controles, como podrían ser ajuste de volumen y reproducción/pausa. Para esto, es necesario agregar el atributo de controles a la etiqueta.

Este atributo es booleano. En consecuencia, la presencia de este atributo equivale a un valor verdadero. También podemos especificar un valor que coincida, con distinción de mayúsculas y minúsculas, con el nombre canónico del atributo, sin espacios en blanco anteriores o posteriores (es decir, controls o controls="controls").

Valores posibles:

• [cadena vacía]
• controls

Cómo controlar la reproducción multimedia

Una vez que hemos insertado los elementos multimedia en nuestro documento HTML con los nuevos componentes, podemos controlarlos automáticamente desde el código JavaScript. Por ejemplo, para iniciar (o reiniciar) la reproducción, podemos hacer esto:

var v = document.getElementsByTagName(“myaudio”);
v.play();

La primera línea toma el primer componente de audio del archivo y la segunda llama a la estrategia de reproducción del componente, que se usa para actualizar los componentes multimedia. Regular un reproductor de sonido HTML5 para que reproduzca, detenga la reproducción, aumente el volumen y lo baje con un poco de código JavaScript es un proceso muy directo:

document.getElementById('demo').play() //Reproducir audio
document.getElementById('demo').pause() //Poner en pausa el audio
document.getElementById('demo').volume+=0.1 // Subir volumen
document.getElementById('demo').volume-=0.1 // Bajar volumen

Búsqueda entre elementos multimedia

Los componentes multimedia permiten mover la posición de reproducción actual a lugares específicos del contenido multimedia. Para hacer esto, hay que establecer el valor de la propiedad currenttime del componente. En esencia, hay que poner la cantidad de segundos que se desea que avance la reproducción.

Podemos hacer uso de la propiedad de búsqueda del componente para obtener los tiempos de inicio y finalización del elemento multimedia. Lo que se obtiene aquí es un objeto TimeRanges, que incluye un listado con los tiempos hacia los cuales se puede dirigir la búsqueda.

var audioElement = document.getElementById(“myaudio”);
audioElement.seekable.start();  // Devuelve el tiempo inicial (en segundos)
audioElement.seekable.end();    // Devuelve el tiempo final (en segundos)
audioElement.currentTime = 122; // Busca los 122 segundos
audioElement.played.end();      // Devuelve la cantidad de segundos que reprodujo el navegador

Biblioteca SimpleGame

La biblioteca simpleGame hace que sea muy fácil componer nuevos sonidos por medio de agregar un objeto Sound. El objeto Sound de la biblioteca simpleGame se basa en la etiqueta <sound> de HTML5.

<script type="text/javascript"
   src = "simpleGame.js"></script><script type="text/javascript">

Es muy sencillo manejar los efectos de sonido con la biblioteca simpleGame:

1. Hay que crear el efecto de sonido. Los mejores formatos son mp3 y ogg.
2. Hay que crear una variable para contener el efecto de sonido. Es importante recordar definir la variable fuera de la función.
3. La biblioteca SimpleGame tiene un objeto Sound. A continuación, se debe crear una instancia de esto para componer el sonido. El objeto de sonido requiere de un parámetro. Se puede establecer el parámetro en la función init.
4. El sonido se puede reproducir con el método play() del objeto.

Canvas directo de AppMobi

Para suplementar sus aptitudes para HTML5, puede que los desarrolladores deseen explorar las herramientas de desarrollo y el entorno de AppMobi para compilar aplicaciones robustas. La tecnología App Game Interface (AGI) de AppMobi proporciona a las aplicaciones HTML5 híbridas la capacidad de acelerar sus instrucciones de etiqueta canvas. Esta tecnología fue desarrollada por AppMobi (http://www.appmobi.com), una empresa de servicios HTML5 que inicialmente se llamaba directCanvas.

Para usar la AGI, primero debemos comprender cómo funciona. La instrucción de canvas acelerado por AGI necesita ser apilada en su propia "perspectiva", de manera similar al esquema HTML, en la cual estas órdenes se traducen a un nivel más alto y se ejecutan más rápido. Pero esta vista dividida no incorpora el acceso a todo el modelo de objeto de archivo (DOM) y debería depender de un cargo de expansión para intercambiar información entre la vista Web común y la vista acelerada.

El código para la "perspectiva" acelerada queda bajo la vista Web HTML5, lo cual implica que todos los componentes gráficos incorporados en los documentos HTML de la provisión API de AGI se representarán de manera fiable por encima de los gráficos acelerados.

Image may be NSFW.
Clik here to view.

Uso de las prestaciones de sonido de la AGI

La tecnología App Game Interface (AGI) ha resuelto ciertos puntos débiles de HTML5 respecto del sonido, con actualizaciones de sonidos múltiples. No era unos de los fines de HTML5 reproducir diferentes sonidos poco convencionales con baja latencia, sin embargo, eso es precisamente lo que tanto necesitan los juegos y otras aplicaciones. La innovación de la AGI con los sonidos múltiples permite que todos los elementos de los juegos reproduzcan un sonido cuando tengan que hacerlo, sin tomar en consideración otros sonidos que puedan reproducirse en simultáneo. Es posible acceder a todas las API de AppMobi por medio del objeto Appmobi.context y su finalidad es mejorar la ejecución y ampliar las posibilidades de uso.

Estas estrategias se pueden emplear para controlar un sonido de fondo solitario:

startBackgroundSound:

Este método inicia la reproducción de un sonido que se reproduce continuamente de fondo.

La App Game Interface de canvas acelerado puede manejar un único sonido de fondo. Se debe usar este método para iniciar la reproducción de un sonido o música de fondo. Este comando se incluye, además del objeto Audio, para mejorar el rendimiento y facilitar el uso.

Sintaxis

AppMobi.context.startBackgroundSound("sounds/music_main.mp3",true)

El primer parámetro es la ruta y el nombre del archivo del sonido de fondo que se desea reproducir, mientras que el segundo parámetro es un valor booleano opcional que especifica si este sonido de fondo se debe repetir intermitentemente o no.

toggleBackgroundSound

Se debe usar este método para alternar entre la reproducción de un sonido y su detención. La App Game Interface de canvas acelerado puede manejar un único sonido de fondo. Se debe usar este método para alternar entre la reproducción de un sonido o música de fondo y su detención. Este comando se incluye, además del objeto Audio, para mejorar el rendimiento y facilitar el uso.

Sintaxis

AppMobi.context.toggleBackgroundSound();

stopBackgroundSound

Use comando sirve para detener la reproducción del sonido de fondo. La App Game Interface de canvas acelerado puede manejar un único sonido de fondo. Se debe usar este método para detener la reproducción de un sonido o música de fondo. Este comando se incluye, además del objeto Audio, para mejorar el rendimiento y facilitar el uso.

Sintaxis

AppMobi.context.stopBackgroundSound()

Conclusión

A pesar de ciertos comportamientos impredecibles de los navegadores, HTML5 es una tecnología fantástica para crear nuevas aplicaciones potentes. En este artículo, hemos estudiado cómo incorporar sonido en nuestras aplicaciones con el componente de audio de HTML5 y hemos visto la tecnología AGI de AppMobi, que brinda herramientas adicionales para desarrollar maravillosas aplicaciones. Es posible combinar otras tecnologías o herramientas como JavaScript, phonegap, appmobi, etc. con HTML5 para abrir la posibilidad de escribir aplicaciones que normalmente exigirían código nativo.

Más recursos

HTML5 es una tendencia a futuro en el mundo del desarrollo de aplicaciones. Intel cree que es importante ayudar a los desarrolladores experimentados a hacer la transición a este enfoque multiplataforma y a los desarrolladores nuevos a ponerse rápidamente en ritmo con esta táctica que tanto entusiasmo despierta, para que así puedan desarrollar sus aplicaciones y juegos en casi todas las plataformas informáticas modernas. Hay más recursos a disposición en las páginas Intel HTML5 y Intel Android.

Algunos demos interesantes de uso de sonido en HTML5:
http://www.createjs.com/#!/SoundJS/demos/visualizer
http://www.createjs.com/#!/SoundJS/demos/game
http://www.createjs.com/#!/SoundJS/demos/explosion

Other Related Articles and Resources

Creating cool animations and transitions in HTML5 app for Intel Android devices.
Using the touch screen in your HTML5 games for Intel Android device
working with audio tag in HTML5
HTML5 New tags
HDMI Audio Case Study: Denon AV Receivers

To learn more about Intel tools for the Android developer, visit Intel® Developer Zone for Android.
 

Intel and the Intel logo are trademarks of Intel Corporation in the U.S. and/or other countries.
Copyright © 2013 Intel Corporation. All rights reserved.
*Other names and brands may be claimed as the property of others.