Efectos de sonido en JavaScript/HTML5

Resuelto Stéphan Kochen asked hace 14 años • 18 respuestas

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

Los requisitos específicos son pocos:

  • Reproduce y mezcla múltiples sonidos,
  • Reproduzca la misma muestra varias veces, posiblemente superponiendo reproducciones,
  • Interrumpir la reproducción de una muestra en cualquier momento,
  • Preferiblemente reproduzca archivos WAV que contengan PCM sin formato (de baja calidad), pero puedo convertirlos, por supuesto.

Mi primer enfoque fue utilizar el <audio>elemento HTML5 y definir todos los efectos de sonido en mi página. Firefox reproduce los archivos WAV perfectamente, pero llamar #playvarias veces en realidad no reproduce la muestra varias veces. Según tengo entendido de la especificación HTML5, el <audio>elemento también rastrea el estado de reproducción, lo que explica por qué.

Mi pensamiento inmediato fue clonar los elementos de audio, así que creé la siguiente pequeña biblioteca de JavaScript para hacerlo 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;
      };
    });
  }
};

Ahora puedo hacerlo Snd.boom();desde la consola Firebug y reproducir snd/boom.wav, pero todavía no puedo reproducir la misma muestra varias veces. Parece que el <audio>elemento es más una función de transmisión que algo para reproducir efectos de sonido.

¿Existe alguna forma inteligente de hacer que esto suceda y 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 probé (Opera, Midori, Chromium, Epiphany) produjeron resultados variables. Algunos no juegan nada y otros lanzan excepciones.

Stéphan Kochen avatar Dec 20 '09 02:12 Stéphan Kochen
Aceptado

Audioobjetos HTML5

No necesitas preocuparte por <audio>los elementos. HTML 5 te permite acceder Audioa objetos 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 puedes configurar snd.currentTime=0el objeto después de que termine de reproducirse.

Dado que el constructor JS no admite <source>elementos alternativos, debes 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á utilizar Web Audio API más avanzada , que ahora es compatible con la mayoría de los navegadores .

Kornel avatar Dec 19 '2009 22:12 Kornel

API de audio web

Editar: a partir de diciembre de 2021, Web Audio API es esencialmente compatible con Chrome, Firefox, Safari y todos los demás navegadores principales (excepto IE, por supuesto).

A partir de julio de 2012, la API Web Audio ahora es compatible con Chrome y, al menos parcialmente, con Firefox, y está previsto que se agregue a IOS a partir de la versión 6.

Aunque el Audioelemento es lo suficientemente robusto como para usarse mediante programación para tareas básicas, nunca estuvo pensado para brindar soporte de audio completo para juegos y otras aplicaciones complejas. Fue diseñado para permitir que un solo elemento multimedia se incruste en una página, similar a una imgetiqueta. Hay muchos problemas al intentar usarlo para juegos:

  • Los desfases de tiempo son comunes con Audiolos elementos.
  • Necesitas un Audioelemento para cada instancia de un sonido.
  • Los eventos de carga aún no son totalmente confiables
  • Sin controles de volumen comunes, sin desvanecimientos, sin filtros/efectos

A continuación se muestran algunos buenos recursos para comenzar con la API de Web Audio:

  • Documentación de MDN
  • Artículo Introducción a WebAudio
  • El estudio de caso de FieldRunners WebAudio también es una buena lectura
Chris Jaynes avatar Jul 18 '2012 21:07 Chris Jaynes