Riproduci file audio in JavaScript

1. Usa .play() per riprodurre file audio in JavaScript
2. Utilizza l’API Web Audio per riprodurre file audio
3. Usa la libreria howler.js per riprodurre file audio in JavaScript

In questo articolo impareremo come riprodurre file audio in JavaScript.

Possiamo aggiungere file audio alla nostra pagina semplicemente usando il tag <audio>. È il modo più semplice per riprodurre file audio senza coinvolgere affatto JavaScript. L’attributo src del tag <audio> specifica l’indirizzo del file audio. Ha anche altri attributi utili come control, autoplay e loop. Ma ci sono momenti in cui vogliamo prendere il controllo automaticamente e riprodurre i suoni automaticamente, come in un gioco, quando facciamo clic o qualsiasi altro evento. In tali situazioni, vogliamo che JavaScript prenda il controllo e riproduca i file secondo la nostra logica.

Usa .play() per riprodurre file audio in JavaScript

Possiamo caricare un file audio in JavaScript semplicemente creando un’istanza di oggetto audio, cioè usando new Audio(). Dopo che un file audio è stato caricato, possiamo riprodurlo usando la funzione .play().

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

Nel codice sopra, carichiamo un file audio e poi semplicemente lo riproduciamo. JavaScript ci fornisce molta flessibilità e tantissime funzionalità. Possiamo controllare la velocità di riproduzione, riprodurre in loop l’audio, mettere in pausa e riprodurre il suono. L’unico problema è gestire più suoni contemporaneamente e un controllo un po’ limitato rispetto agli ultimi sofisticati.

Utilizza l’API Web Audio per riprodurre file audio

Sebbene un po’ complicato da configurare, l’API Web Audio ci fornisce molta flessibilità e controllo sul suono. È un progresso significativo rispetto al tipico audio HTML5 e consente una manipolazione audio complessa. Utilizza l’audio HTML5 per rappresentare gli elementi audio come nodi su una struttura simile a un grafico diretta chiamata contesto audio. Possono esserci molti tipi di nodi come i nodi del volume collegati tra la sorgente audio e la destinazione e ci aiutano a manipolare il 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();

Qui inizializziamo prima un contesto audio e otteniamo il riferimento alla sorgente del file audio. Quindi colleghiamo quella sorgente a una destinazione globale e la nostra configurazione audio è completata.

Usa la libreria howler.js per riprodurre file audio in JavaScript

howler.js è una libreria di manipolazione audio. Ci consente di sfruttare la potenza dell’API Web Audio e la semplicità di HTML 5 Audio. È ampiamente utilizzato con componenti di classe React per gestire l’audio basato su browser, specialmente durante la riproduzione di più sorgenti audio. Abilita il controllo del contesto audio globale utilizzando un oggetto Howler e quindi controlla l’audio o un gruppo di audio utilizzando 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>

Tutti i principali browser tranne Internet Explorer supportano tutti questi metodi. Internet Explorer non supporta l’API Web Audio e howler.js.