Cómo añadir sonido en juegos HTML5 correctamente es uno de los temas más buscados por desarrolladores de juegos HTML5, ¿Por qué? Debido a la compatibilidad de los distintos navegadores web. Actualmente, no podemos tener un sólo fichero de sonido que sea compatible con todos los navegadores. ¿Podemos hacer algo? Duplicar los formatos. Si estás empezando a programar juegos HTML5 no te olvides de pasar por nuestros consejos para embarcarte en esta aventura.

Como añadir sonido a tus juegos HTML5 correctamente
Sonido en juegos HTML5

HTML5 y sus formatos de audio

En HTML5 contamos con 3 tipos de formatos los cuales nos permitirán hacer compatibles los sonidos en todos los navegadores. Estos son MP3, Wav y Ogg. A día de hoy, MP3 ya es compatible con todos los navegadores modernos (sin entrar en detalle, ni voy a deciros que en android, iOs y otros dispositivos será una lotería con dependencia de cada dispositivo)


mime type

Google Chrome

Mozilla Firefox

Internet Explorer

Safari

Opera

MP3

audio/mpeg

Waw

audio/ogg

Ogg

audio/wav

WordPress Pricing Table Plugin

Pero, según la tabla que os dejo, actualizada a día de hoy, MP3 parece el formato más adecuado para usar en nuestros juegos si miramos la compatibilidad. Hay que tener en cuenta que las actualizaciones que realiza el usuario no avanzan al mismo ritmo que las de los navegadores por lo que todavía podríamos encontrar usuarios de algunos navegadores (Que son nuestro público) cuyo navegador no es compatible. La música en un juego es muy importante y no podemos dejar que uno de nuestros juegos no reproduzca sonido por problemas de compatibilidad.

Por añadir algunos detalles más, el formato OGG acabará siendo algún día el reemplazo a MP3. Es un formato mejor creado que MP3 pero MP3 se llevó el estándar en su momento, así que el cambió tardará. Es cierto que muchos reproductores están optimizados para decodificar MP3 y con OGG son más costosos en CPU aunque nos podemos reír de la diferencia que supone eso (en el uso que tendrá ese sonido en juegos HTML5)

Solución al problema de la compatibilidad del audio en HTML5

La solución no es muy difícil, Tendremos que usar la combinación de formatos que nos den mayor compatibilidad y dependiendo del navegador a usar, cargaremos nuestros sonidos en uno u otro formato. Los 2 formatos más compatibles serían MP3 y WAV. ¿Cual sería el problema ahora?. El tamaño del formato WAV es bastante mayor al de MP3 y OGG, ese problema choca directamente con que tu juego se inicie rápido lo que es un requisito importantísimo a la hora de cualquier distribuidor se interese por tu juego.

Podemos encontrar efectos de sonidos en WAV con una gran calidad y un tamaño muy bajo, pero ninguna melodía o sonido con más elaboración nos permitirá conseguir un buen fichero con poco peso en este formato.

Comparativa formatos audio
Comparativa formatos audio

Dependiendo de cómo desarrolléis vuestros juegos, el motor o librerías que uséis incluyen métodos que permiten añadir sonido en juegos HTML5, algunos son más transparentes o menos para los programadores, pero todos tienen que ser 100% transparentes para los jugadores.

Conclusiones de como añadir sonido en juegos HTML5

A modo de resumen os dejo unos puntos como conclusiones que deberíamos de haber sacado en claro de este post:

  • Mantener la compatibilidad de los sonido en juegos HTML5 es muy importante.
  • La manera más segura a día de hoy es la de mantener los sonidos en 2 formatos.
  • Intentaremos no usar ficheros wav por su enorme tamaño, requisito a evitar en la web.
Cómo añadir sonido en juegos HTML5

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *