Reproduzir ficheiros áudio em JavaScript

1. Use .play() para reproduzir arquivos de áudio em JavaScript
2. Use a API de áudio da web para reproduzir arquivos de áudio
3. Use a biblioteca howler.js para reproduzir arquivos de áudio em JavaScript

Neste artigo, aprenderemos como reproduzir arquivos de áudio em JavaScript.

Podemos adicionar arquivos de áudio à nossa página simplesmente usando a tag <audio>. É a maneira mais fácil de reproduzir arquivos de áudio sem envolver o JavaScript. O atributo src da tag <audio> especifica o endereço do arquivo de áudio. Ele também possui outros atributos úteis como control, autoplay e loop. Mas há momentos em que queremos assumir o controle automaticamente e reproduzir sons automaticamente, como em um jogo, quando clicamos ou qualquer outro evento. Em tais situações, queremos que o JavaScript assuma o controle e reproduza arquivos de acordo com nossa lógica.

Use .play() para reproduzir arquivos de áudio em JavaScript

Podemos carregar um arquivo de áudio em JavaScript simplesmente criando uma instância de objeto de áudio, ou seja, usando new Audio(). Depois que um arquivo de áudio é carregado, podemos reproduzi-lo usando a função .play().

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

No código acima, carregamos um arquivo de áudio e simplesmente o reproduzimos. JavaScript nos fornece muita flexibilidade e muitos recursos. Podemos controlar a taxa de reprodução, repetir o áudio, pausar e reproduzir o som. O único problema é lidar com vários sons ao mesmo tempo e um controle um tanto limitado em comparação com os mais sofisticados.

Use a API de áudio da web para reproduzir arquivos de áudio

Embora seja um pouco complicado de configurar, a API de áudio da Web nos fornece muita flexibilidade e controle sobre o som. É um avanço significativo em relação ao áudio HTML5 típico e permite a manipulação de áudio complexa. Ele usa áudio HTML5 para representar os elementos de áudio como nós em uma estrutura semelhante a um gráfico direcionado, chamada de contexto de áudio. Pode haver muitos tipos de nós, como nós de volume, conectados entre a origem e o destino de áudio e nos ajudam a manipular o volume.

<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();

Aqui, primeiro inicializamos um contexto de áudio e obtemos a referência à fonte do arquivo de áudio. Em seguida, conectamos essa fonte a um destino global e nossa configuração de áudio está concluída.

Use a biblioteca howler.js para reproduzir arquivos de áudio em JavaScript

howler.js é uma biblioteca de manipulação de áudio. Ele nos permite aproveitar o poder da API de áudio da Web e a simplicidade do HTML 5 Audio. É amplamente usado com componentes de classe react para lidar com áudio baseado em navegador, especialmente durante a reprodução de várias fontes de áudio. Ele permite o controle do contexto global de áudio usando um objeto Howler e, em seguida, controla o áudio ou um grupo de áudios 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 os principais navegadores, exceto o Internet Explorer, oferecem suporte a todos esses métodos. O Internet Explorer não tem suporte para Web Audio API e howler.js.