Estoy usando HTML5 para programar juegos; El obstáculo con el que me he encontrado ahora es cómo reproducir efectos de sonido.

Los requisitos específicos son pocos en número:

• Juega y mezcla múltiples sonidos,
• Reproduzca la misma muestra varias veces, posiblemente reproducciones superpuestas,
• Interrumpir la reproducción de una muestra en cualquier punto,
• Preferiblemente reproduzco archivos WAV que contienen PCM sin procesar (de baja calidad), pero puedo convertirlos, por supuesto.

Mi primer enfoque fue usar el <audio>elemento HTML5 y definir todos los efectos de sonido en mi página. Firefox reproduce los archivos WAV simplemente a melocotón, pero llamar #playvarias veces realmente no reproduce la muestra varias veces. Desde mi comprensión de la especificación HTML5, el <audio>elemento también rastrea el estado de reproducción, por lo que eso explica por qué.

Mi pensamiento inmediato fue clonar los elementos de audio, así que creé la siguiente pequeña biblioteca de JavaScript para hacer eso por mí (depende de jQuery):

var Snd = {
  init: function() {
    $("audio").each(function() {
      var src = this.getAttribute('src');
      if (src.substring(0, 4) !== "snd/") { return; }
      // Cut out the basename (strip directory and extension)
      var name = src.substring(4, src.length - 4);
      // Create the helper function, which clones the audio object and plays it
      var Constructor = function() {};
      Constructor.prototype = this;
      Snd[name] = function() {
        var clone = new Constructor();
        clone.play();
        // Return the cloned element, so the caller can interrupt the sound effect
        return clone;
      };
    });
  }
};

Así que ahora puedo hacerlo Snd.boom();desde la consola Firebug y jugar snd/boom.wav, pero aún no puedo reproducir la misma muestra varias veces. Parece que el <audio>elemento es realmente más una función de transmisión en lugar de algo con lo que reproducir efectos de sonido.

¿Hay una manera inteligente de hacer que esto suceda que me falta, preferiblemente usando solo HTML5 y JavaScript?

También debo mencionar que mi entorno de prueba es Firefox 3.5 en Ubuntu 9.10. Los otros navegadores que he probado - Opera, Midori, Chromium, Epiphany - produjeron resultados variables. Algunos no juegan nada, y algunos lanzan excepciones.

AudioObjetos HTML5

No necesita molestarse con los <audio>elementos. HTML 5 le permite acceder a Audioobjetos directamente:

var snd = new Audio("file.wav"); // buffers automatically when created
snd.play();

No hay soporte para mezclar en la versión actual de la especificación.

Para reproducir el mismo sonido varias veces, cree varias instancias del Audioobjeto. También puede establecer snd.currentTime=0el objeto después de que termine de reproducirse.

Dado que el constructor JS no admite <source>elementos de reserva , debe usar

(new Audio()).canPlayType("audio/ogg; codecs=vorbis")

para probar si el navegador es compatible con Ogg Vorbis.

Si está escribiendo un juego o una aplicación de música (más que un simple reproductor), querrá usar una API de audio web más avanzada , que ahora es compatible con la mayoría de los navegadores .

WebAudio API por W3C

A partir de julio de 2012, la API de WebAudio ahora es compatible con Chrome, y al menos parcialmente compatible con Firefox, y está programada para agregarse a iOS a partir de la versión 6.

Aunque es lo suficientemente robusto como para usarse programáticamente para tareas básicas, el elemento Audio nunca tuvo la intención de proporcionar soporte de audio completo para juegos, etc. Fue diseñado para permitir que una sola pieza de medios se incruste en una página, similar a un img etiqueta. Hay muchos problemas al intentar usar la etiqueta de audio para juegos:

• Los deslizamientos de tiempo son comunes con los elementos de audio.
• Necesita un elemento de audio para cada instancia de un sonido
• Los eventos de carga aún no son totalmente confiables
• Sin controles de volumen comunes, sin desvanecimiento, sin filtros / efectos

Utilicé este artículo Comenzando con WebAudio para comenzar con la API de WebAudio. El estudio de caso de FieldRunners WebAudio también es una buena lectura.

howler.js

Para la creación de juegos, una de las mejores soluciones es usar una biblioteca que resuelva los muchos problemas que enfrentamos al escribir código para la web, como howler.js . howler.js resume la gran (pero de bajo nivel) API de audio web en un marco fácil de usar. Intentará recurrir a HTML5 Audio Element si Web Audio API no está disponible.

var sound = new Howl({
  urls: ['sound.mp3', 'sound.ogg']
}).play();
// it also provides calls for spatial/3d audio effects (most browsers)
sound.pos3d(0.1,0.3,0.5);

wad.js

Otra gran biblioteca es wad.js , que es especialmente útil para producir audio de sintetizador, como música y efectos. Por ejemplo:

var saw = new Wad({source : 'sawtooth'})
saw.play({
    volume  : 0.8,
    wait    : 0,     // Time in seconds between calling play() and actually triggering the note.
    loop    : false, // This overrides the value for loop on the constructor, if it was set. 
    pitch   : 'A4',  // A4 is 440 hertz.
    label   : 'A',   // A label that identifies this note.
    env     : {hold : 9001},
    panning : [1, -1, 10],
    filter  : {frequency : 900},
    delay   : {delayTime : .8}
})

Sonido para juegos

Otra biblioteca similar a Wad.js es " Sound for Games ", se centra más en la producción de efectos, al tiempo que proporciona un conjunto similar de funcionalidades a través de una API relativamente distinta (y quizás más concisa):

function shootSound() {
  soundEffect(
    1046.5,           //frequency
    0,                //attack
    0.3,              //decay
    "sawtooth",       //waveform
    1,                //Volume
    -0.8,             //pan
    0,                //wait before playing
    1200,             //pitch bend amount
    false,            //reverse bend
    0,                //random pitch range
    25,               //dissonance
    [0.2, 0.2, 2000], //echo array: [delay, feedback, filter]
    undefined         //reverb array: [duration, decay, reverse?]
  );
}

Resumen

Vale la pena echar un vistazo a cada una de estas bibliotecas, ya sea que necesite reproducir un solo archivo de sonido, o tal vez crear su propio editor de música basado en html, generador de efectos o videojuego.

También puede usar esto para detectar audio HTML 5 en algunos casos:

http://diveintohtml5.ep.io/everything.html

Función de detección de HTML 5 JS

function supportsAudio()
{
    var a = document.createElement('audio'); 
    return !!(a.canPlayType && a.canPlayType('audio/mpeg;').replace(/no/, ''));
}

Aquí hay un método para hacer posible reproducir incluso el mismo sonido simultáneamente. Combine con el precargador, y ya está todo listo. Esto funciona con Firefox 17.0.1 al menos, aún no lo he probado con nada más.

// collection of sounds that are playing
var playing={};
// collection of sounds
var sounds={step:"knock.ogg",throw:"swing.ogg"};

// function that is used to play sounds
function player(x)
{
    var a,b;
    b=new Date();
    a=x+b.getTime();
    playing[a]=new Audio(sounds[x]);
    // with this we prevent playing-object from becoming a memory-monster:
    playing[a].onended=function(){delete playing[a]};
    playing[a].play();
}

Vincula esto a una tecla del teclado y disfruta:

player("step");

Parece que lo que quieres son sonidos multicanal. Supongamos que tiene 4 canales (como en los juegos de 16 bits realmente antiguos), todavía no he tenido la oportunidad de jugar con la función de audio HTML5, pero no solo necesita 4 elementos <audio> y ciclo que se usa tocar el próximo efecto de sonido? ¿Has intentado eso? ¿Lo que pasa? Si funciona: para reproducir más sonidos simultáneamente, solo agregue más elementos <audio>.

He hecho esto antes sin el elemento HTML5 <audio>, usando un pequeño objeto Flash de http://flash-mp3-player.net/ - Escribí un cuestionario de música ( http://webdeavour.appspot.com/ ) y lo usó para reproducir clips de música cuando el usuario hizo clic en el botón de la pregunta. Inicialmente tenía un jugador por pregunta, y era posible jugarlos uno encima del otro, así que lo cambié para que solo hubiera un jugador, lo que apunté a diferentes clips de música.

Eche un vistazo al sitio jai (-> espejo ) (interfaz de audio javascript). Al mirar su fuente, parecen estar llamando play()repetidamente, y mencionan que su biblioteca podría ser apropiada para su uso en juegos basados ​​en HTML5.

Puede disparar múltiples eventos de audio simultáneamente, lo que podría usarse para crear juegos Javascript o tener una voz hablando sobre música de fondo

Para reproducir la misma muestra varias veces, ¿no sería posible hacer algo como esto:

e.pause(); // Perhaps optional
e.currentTime = 0;
e.play();

( ees el elemento de audio)

Tal vez entendí mal tu problema, ¿quieres que el efecto de sonido se reproduzca varias veces al mismo tiempo? Entonces esto está completamente mal.

Aquí hay una idea. Cargue todo su audio para una determinada clase de sonidos en un solo elemento de audio individual donde los datos src son todas sus muestras en un archivo de audio contiguo (probablemente desee un poco de silencio entre ellas para poder capturar y cortar las muestras con un tiempo de espera con menos riesgo de sangrado a la siguiente muestra). Luego, busque la muestra y reprodúzcala cuando sea necesario.

Si necesita más de uno de estos para reproducir, puede crear un elemento de audio adicional con el mismo src para que quede en caché. Ahora, efectivamente tiene múltiples "pistas". Puede utilizar grupos de pistas con su esquema de asignación de recursos favorito, como Round Robin, etc.

También puede especificar otras opciones como poner en cola los sonidos en una pista para reproducir cuando ese recurso esté disponible o cortar una muestra que se está reproduciendo actualmente.

http://robert.ocallahan.org/2011/11/latency-of-html5-sounds.html

http://people.mozilla.org/~roc/audio-latency-repeating.html

Funciona bien en Firefox y Chrome para mí.

Para detener un sonido que comenzó, haga var sound = document.getElementById ("shot"). CloneNode (true); sound.play (); y luego sound.pause ();

Recomendaría usar SoundJS , una biblioteca que he ayudado a desarrollar. Le permite escribir una única base de código que funciona en todas partes, con SoundJS seleccionando audio web, audio html o audio flash según corresponda.

Te permitirá hacer todo lo que quieras:

• Juega y mezcla múltiples sonidos,
• Reproduzca la misma muestra varias veces, posiblemente reproducciones superpuestas
• Interrumpir la reproducción de una muestra en cualquier punto
• reproducir archivos WAV que contengan (según el soporte del navegador)

Espero que ayude.

No es posible hacer múltiples disparos con un solo <audio>elemento. Necesitas usar múltiples elementos para esto.

Me encontré con esto mientras programaba un generador de tarjeta de caja de música. Comenzó con diferentes bibliotecas, pero cada vez hubo un problema técnico de alguna manera. El retraso en la implementación de audio normal fue malo, no hubo reproducciones múltiples ... finalmente terminó usando la biblioteca lowlag + soundmanager:

http://lowlag.alienbill.com/ y http://www.schillmania.com/projects/soundmanager2/

Puede consultar la implementación aquí: http://musicbox.grit.it/

Genere archivos wav + ogg para juegos en varios navegadores. Este reproductor de MusicBox funciona de manera receptiva en iPad, iPhone, Nexus, Mac, PC, ... funciona para mí.

Sé que esto es un truco total, pero pensé que debería agregar esta biblioteca de audio de código abierto de muestra que puse en Github hace un tiempo ...

https://github.com/run-time/jThump

Después de hacer clic en el enlace a continuación, escriba las teclas de la fila de inicio para reproducir un riff de blues (también escriba varias teclas al mismo tiempo, etc.)

Muestra usando la biblioteca jThump >> http://davealger.com/apps/jthump/

Básicamente funciona creando <iframe>elementos invisibles que cargan una página que reproduce un sonido en Ready ().

Esto ciertamente no es ideal pero podrías hacer +1 en esta solución basada solo en la creatividad (y en el hecho de que es de código abierto y funciona en cualquier navegador en el que lo haya probado) Espero que al menos alguien más busque algunas ideas.

:)

La respuesta seleccionada funcionará en todo excepto IE. Escribí un tutorial sobre cómo hacerlo funcionar cross browser = http://www.andy-howard.com/how-to-play-sounds-cross-browser-incincluido-ie/index.html

Aquí está la función que escribí;

function playSomeSounds(soundPath)
 {

 var trident = !!navigator.userAgent.match(/Trident\/7.0/);
 var net = !!navigator.userAgent.match(/.NET4.0E/);
 var IE11 = trident && net
 var IEold = ( navigator.userAgent.match(/MSIE/i) ? true : false );
 if(IE11 || IEold){
 document.all.sound.src = soundPath;
 }
 else
 {
 var snd = new Audio(soundPath); // buffers automatically when created
 snd.play();
 }
 };

También debe agregar la siguiente etiqueta a la página html:

<bgsound id="sound">

Finalmente puede llamar a la función y simplemente pasar por la ruta aquí:

playSomeSounds("sounds/welcome.wav");

Siempre puede intentarlo AudioContext, tiene un soporte limitado, pero es parte del borrador de trabajo de la API de audio web . Puede valer la pena si planeas lanzar algo en el futuro. Y si solo estás programando para Chrome y Firefox, eres dorado.

Web Audio API es la herramienta adecuada para este trabajo. Hay un poco de trabajo involucrado en cargar archivos de sonido y reproducirlo. Afortunadamente, hay muchas bibliotecas que simplifican el trabajo. Al estar interesado en los sonidos también creé una biblioteca llamada mosquito , puedes ver eso también.

Actualmente solo admite efectos de sonido de desvanecimiento y estoy trabajando en otras cosas como la espacialización 3D.