Cómo agregar efectos de sonido y música a un juego de navegador

Usa los sonidos incluidos gratis o sube tus propios archivos MP3, WAV, OGG o M4A, y luego dile a la IA cuándo suena cada uno; Go Bananas iguala el volumen y se encarga de los teléfonos.

El sonido es la mitad de cómo se siente un juego. Una moneda que tintinea, un salto que zumba y un golpe que retumba les dicen a los jugadores lo que pasó sin que tengan que leer nada. La música crea el ambiente y hace que un juego corto se sienta terminado. Esta guía cubre los sonidos gratis que puedes usar de inmediato, cómo subir los tuyos, cómo pedirle a la IA que los use, la función de audio para desarrolladores y cómo hacer que todo suene bien en los teléfonos.

Por qué el sonido importa en los juegos

Respuesta. Cada acción importante debería hacer un sonido: recoger algo, recibir un golpe, sumar puntos, perder una vida. Los jugadores notan más un sonido que falta que uno mediocre.
Sensación. El mismo salto se siente más pesado o más ligero según su sonido. Los efectos cortos y contundentes hacen que los controles se sientan ágiles.
Información. El sonido puede avisar de cosas que están fuera de la pantalla: un enemigo detrás de ti, un temporizador a punto de agotarse.
Ambiente. La música y el sonido de fondo les dicen a los jugadores si el juego es tenso, gracioso o tranquilo.

Sonidos incluidos que puedes usar gratis

Go Bananas tiene un pequeño paquete de efectos de sonido que cualquiera puede usar en sus juegos, publicado bajo CC0 (no hace falta pedir permiso ni dar crédito). Cada uno está en https://gobananas.co/sfx/<name>.mp3:

Nombre	Qué es
`gunshot`	Un disparo
`reload`	Un arma que se recarga
`hit`	Un impacto
`footstep`	Un paso
`pickup`	Recoger algo
`menu_click`	Un clic de menú
`zombie_moan`	Un zombi que gime
`zombie_attack`	Un zombi que ataca
`zombie_death`	Un zombi que muere
`ambient_tension`	Un fondo en bucle con tensión, de unos 10 segundos

La IA no conoce este paquete a menos que se lo digas, así que dale la dirección en tu petición:

Cuando el jugador recoja una llave, reproduce https://gobananas.co/sfx/pickup.mp3.

Usa siempre la dirección completa que empieza con https://. Los juegos funcionan en un entorno aislado (sandbox) donde las direcciones cortas como /sfx/pickup.mp3 no cargan.

Cómo subir tus propios sonidos

Puedes subir efectos de sonido, voces y música en MP3, WAV, OGG o M4A. Usa la ventana Upload Asset (subir recurso), desde la pestaña Assets (recursos) o desde el editor. Si sueltas un archivo de audio en el panel de crear, se abre esa ventana por ti. Necesitas una cuenta verificada y marcar una casilla para confirmar que tienes derecho a usar el audio: es obra tuya, tiene licencia o es de dominio público.

Límite	Valor
Tamaño del archivo	5 MB por archivo
Duración	120 segundos por archivo
Almacenamiento de audio	50 MB por cuenta
Carátula y etiquetas incrustadas	256 KB como máximo

Qué hace el sitio con tu audio

Cada archivo subido se procesa de la misma manera, sea cual sea su formato:

El volumen se iguala a -16 LUFS, un nivel estándar para juegos y streaming, así que una grabación baja y una fuerte terminan con el mismo volumen.
Se recorta el silencio del principio, para que el sonido suene en el momento en que se activa. El silencio del final se conserva.
Se convierte a MP3 a 44.1 kHz. Los clips de 5 segundos o menos se tratan como efectos de sonido y se guardan en mono a 96 kbps; los clips más largos se tratan como música y se guardan en estéreo a 128 kbps.
Se eliminan las etiquetas y la carátula.
El archivo original no se guarda, solo el MP3.

Verás una advertencia si la grabación satura (se distorsiona en sus puntos más fuertes) o si su volumen original era inusualmente bajo o alto. La saturación no se puede arreglar después, así que vale la pena exportar una versión más limpia.

Recorte y volumen

Cada sonido en tus recursos tiene un botón de reproducir, una forma de onda y su duración. Puedes recortar un sonido en la app para quedarte solo con una parte; el archivo no se corta, y el juego reproduce solo la parte que conservaste.

En la pestaña Assets del editor, + Attach to game (adjuntar al juego) agrega un sonido al juego que estás editando. Los sonidos adjuntos tienen un control de volumen de 0 a 100, que empieza en 100, para que puedas bajar la música o suavizar un paso sin editar código. Los cambios se guardan automáticamente.

Cómo pedirle a la IA que use tus sonidos

Escribe @ en el cuadro de crear o de editar y elige un sonido. Su nombre se inserta entre comillas, y tú describes cuándo suena:

Reproduce "moneda" cuando el jugador recoja una estrella, y "boing" cuando salte. Pon "tema-bosque" en bucle como música de fondo a volumen bajo.

Cuando creas un juego, a la IA se le informa de todos tus sonidos subidos. Cuando editas un juego que tiene archivos adjuntos, se le informa de los sonidos adjuntos, así que adjunta los que quieras que use.

Para desarrolladores: la función de audio

Todo juego de Go Bananas recibe window.__audio, una pequeña herramienta que funciona en el entorno aislado, desbloquea el sonido en los iPhone y obedece el botón de silencio del sitio. Úsala en lugar de new Audio() o de crear tu propio AudioContext.

// La dirección de un sonido subido viene de GAME_ASSETS (nombre = nombre del archivo sin extensión).
const coinUrl = window.GAME_ASSETS.audio['moneda'].url;
const musicUrl = window.GAME_ASSETS.audio['tema-bosque'].url;
const jumpUrl = 'https://gobananas.co/sfx/pickup.mp3';   // un sonido incluido

// Carga los sonidos con anticipación para que suenen sin demora.
Promise.all([__audio.load(coinUrl), __audio.load(jumpUrl)]);

// Inicia el audio con el primer toque o clic del jugador (necesario en los iPhone).
startButton.addEventListener('click', () => {
  __audio.init();
  __audio.playMusic(musicUrl, { volume: 0.4, loop: true, fadeInMs: 1000 });
  startGame();
});

function onCoinCollected() {
  // Un tono un poco distinto cada vez evita que los sonidos repetidos suenen robóticos.
  __audio.play(coinUrl, { volume: 0.8, rate: 0.95 + Math.random() * 0.1 });
}

Los métodos principales:

init(): llámalo desde un toque o un clic. Desbloquea el audio en los iPhone.
load(url): descarga y decodifica un sonido y devuelve una promesa. Carga antes de reproducir; un sonido que todavía no se cargó suena solo después de decodificarse.
play(url, { volume, pan, rate }): reproduce un efecto de sonido. pan lo coloca a la izquierda o a la derecha, rate cambia la velocidad y el tono.
play3D(url, x, y, z, camera, { volume, maxDist, rate }): reproduce un sonido desde un punto de una escena 3D, más bajo con la distancia.
playMusic(url, { volume, loop, fadeInMs }): reproduce música. Por defecto se repite en bucle, a volumen 0.5, con una entrada gradual de medio segundo.
stopAll(), setMasterVolume(v) y setMuted(true o false).

Pasa siempre una dirección completa. El nombre o el ID de un sonido por sí solo no funciona. El volumen al que suena un sonido es tu volumen general, multiplicado por el control de la pestaña Assets, multiplicado por el volumen que pasas en el código.

El sonido en los teléfonos

No suena nada hasta que el jugador toca la pantalla. Los teléfonos, sobre todo los iPhone, bloquean el audio hasta que el jugador toca la pantalla. Una pantalla de «Toca para empezar» que llame a __audio.init() lo resuelve.
El botón de silencio del sitio funciona en todos los juegos. Los jugadores pueden silenciar cualquier juego con el botón de sonido del sitio, y la función de audio lo obedece, así que no hagas un juego que dependa del sonido para entenderse.
Usa archivos pequeños. Los efectos cortos y un bucle de música compacto cargan más rápido con datos móviles.

Consejos de mezcla

Pon la música más baja que los efectos. Con la música a un volumen de entre 0.3 y 0.5 queda espacio para los sonidos que llevan información.
No acumules copias de un mismo sonido. Si se recogen veinte monedas a la vez, reproduce el sonido una vez o unas pocas, no veinte.
Agrega variación. Un pequeño cambio aleatorio en rate hace que los pasos y los golpes repetidos suenen naturales.
Dale a cada evento importante su propio sonido. Los jugadores aprenden los sonidos rápido; si usas el mismo sonido para cosas distintas, pierden esa información.
Cuida la duración. Los efectos de sonido funcionan mejor por debajo de un segundo. Las colas largas se montan sobre el siguiente sonido.
Haz bucles limpios. La música que se va a repetir debería empezar y terminar en el mismo punto del compás.