Lire des fichiers audio en JavaScript

1. Utilisez .play() pour lire des fichiers audio en JavaScript
2. Utilisez l’API Web Audio pour lire des fichiers audio
3. Utilisez la bibliothèque howler.js pour lire des fichiers audio en JavaScript

Dans cet article, nous allons apprendre à lire des fichiers audio en JavaScript.

Nous pouvons ajouter des fichiers audio à notre page simplement en utilisant la balise <audio>. C’est le moyen le plus simple de lire des fichiers audio sans impliquer du tout JavaScript. L’attribut src de la balise <audio> spécifie l’adresse du fichier audio. Il a également d’autres attributs utiles comme control, autoplay et loop. Mais il y a des moments où nous voulons prendre le contrôle automatiquement et jouer des sons automatiquement, comme dans un jeu, lorsque nous cliquons, ou tout autre événement. Dans de telles situations, nous voulons que JavaScript prenne le contrôle et lise les fichiers selon notre logique.

Utilisez .play() pour lire des fichiers audio en JavaScript

On peut charger un fichier audio en JavaScript simplement en créant une instance d’objet audio, c’est-à-dire en utilisant new Audio(). Après le chargement d’un fichier audio, nous pouvons le lire en utilisant la fonction .play().

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

Dans le code ci-dessus, nous chargeons un fichier audio et le lisons simplement. JavaScript nous offre beaucoup de flexibilité et des tonnes de fonctionnalités. Nous pouvons contrôler la vitesse de lecture, boucler l’audio, mettre en pause et lire le son. Le seul problème est de gérer plusieurs sons à la fois et un contrôle quelque peu limité par rapport aux derniers sophistiqués.

Utilisez l’API Web Audio pour lire des fichiers audio

Bien qu’un peu lourde à mettre en place, l’API Web Audio nous offre beaucoup de flexibilité et de contrôle sur le son. C’est une avancée significative par rapport à l’audio HTML5 typique et permet une manipulation audio complexe. Il utilise l’audio HTML5 pour représenter les éléments audio sous forme de nœuds sur une structure de type graphique dirigée appelée le contexte audio. Il peut y avoir de nombreux types de nœuds comme des nœuds de volume connectés entre la source audio et la destination et nous aident à manipuler le 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();

Ici, nous initialisons d’abord un contexte audio et obtenons la référence à la source du fichier audio. Nous connectons ensuite cette source à une destination globale et notre configuration audio est terminée.

Utilisez la bibliothèque howler.js pour lire des fichiers audio en JavaScript

howler.js est une bibliothèque de manipulation audio. Cela nous permet d’exploiter la puissance de l’API Web Audio et la simplicité de HTML 5 Audio. Il est largement utilisé avec les composants de classe React pour gérer l’audio du navigateur, en particulier lors de la lecture de plusieurs sources audio. Il permet de contrôler le contexte audio global à l’aide d’un objet Howler, puis de contrôler l’audio ou un groupe d’audios à l’aide de 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>

Tous les principaux navigateurs, à l’exception d’Internet Explorer, prennent en charge toutes ces méthodes. Internet Explorer ne prend pas en charge l’API Web Audio et howler.js.