Reproducir archivos de audio en JavaScript

1. Utilice .play() para reproducir archivos de audio en JavaScript
2. Utilice la API de audio web para reproducir archivos de audio
3. Utilice la biblioteca howler.js para reproducir archivos de audio en JavaScript

En este artículo, aprenderemos a reproducir archivos de audio en JavaScript.

Podemos agregar archivos de audio a nuestra página simplemente usando la etiqueta <audio>. Es la forma más sencilla de reproducir archivos de audio sin utilizar JavaScript en absoluto. El atributo src de la etiqueta <audio> especifica la dirección del archivo de audio. También tiene otros atributos útiles como control, autoplay y loop. Pero hay ocasiones en las que queremos tomar el control de forma automática y reproducir sonidos de forma automática, como en un juego, cuando hacemos clic o cualquier otro evento. En tales situaciones, queremos que JavaScript tome el control y reproduzca archivos de acuerdo con nuestra lógica.

Utilice .play() para reproducir archivos de audio en JavaScript

Podemos cargar un archivo de audio en JavaScript simplemente creando una instancia de objeto de audio, es decir, usando new Audio(). Después de cargar un archivo de audio, podemos reproducirlo usando la función .play().

const music = new Audio('adf.wav');
music.play();
music.loop = true;
music.playbackRate = 2;
music.pause();
qqazszdgfbgtyj

En el código anterior, cargamos un archivo de audio y luego simplemente lo reproducimos. JavaScript nos proporciona mucha flexibilidad y toneladas de funciones. Podemos controlar la velocidad de reproducción, reproducir el audio en bucle, pausar y reproducir el sonido. El único problema es manejar varios sonidos a la vez y un control algo limitado en comparación con los últimos sofisticados.

Utilice la API de audio web para reproducir archivos de audio

Aunque es un poco engorroso de configurar, Web Audio API nos proporciona mucha flexibilidad y control sobre el sonido. Es un avance significativo del audio HTML5 típico y permite una manipulación de audio compleja. Utiliza audio HTML5 para representar los elementos de audio como nodos en una estructura de tipo gráfico dirigida llamada contexto de audio. Puede haber muchos tipos de nodos, como nodos de volumen, conectados entre la fuente de audio y el destino y nos ayudan a manipular el volumen.

<audio src='audio_file.mp3'></audio>
const audioContext = new AudioContext();
const element = document.querySelector(audio);
const source = audioContext.createMediaElementSource(element);
source.connect(audioContext.destination)
audio.play();

Aquí, primero inicializamos un contexto de audio y obtenemos la referencia a la fuente del archivo de audio. Luego conectamos esa fuente a un destino global y nuestra configuración de audio está lista.

Utilice la biblioteca howler.js para reproducir archivos de audio en JavaScript

howler.js es una biblioteca de manipulación de audio. Nos permite aprovechar el poder de Web Audio API y la simplicidad de HTML 5 Audio. Se usa ampliamente con componentes de clase de reacción para manejar audio basado en navegador, especialmente mientras se reproducen múltiples fuentes de audio. Permite el control del contexto de audio global usando un objeto Howler y luego controla el audio o un grupo de audios usando Howl.

<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.1/howler.min.js"></script>
<script>
    var sound = new Howl({
      src: ['https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3'],
      volume: 1.0,
      onend: function () {
        alert('We finished with the setup!');
      }
    });
    sound.play()
</script>

Todos los navegadores principales, excepto Internet Explorer, admiten todos estos métodos. Internet Explorer no es compatible con Web Audio API y howler.js.