Howler.js est une bibliothèque JavaScript puissante et populaire pour gérer l’audio sur le web, permettant une manipulation des sons avec précision et efficacité. Ce tutoriel vous guidera dans la création d’un lecteur audio complet en React avec Howler.js, intégrant les fonctionnalités de lecture, pause, navigation entre les pistes et ajustement du volume.
Introduction à Howler.js
Howler.js est conçue pour faciliter la gestion audio dans les applications JavaScript, en apportant de nombreuses fonctionnalités :
- Chargement et gestion des fichiers audio ;
- Prise en charge des événements de fin et d’erreurs ;
- Contrôle précis du volume et des options de boucle ;
- Fonctionnalités avancées de spatialisation audio et de gestion multi-sons.
L’utilisation de Howler.js dans une application React rend la création d’un lecteur audio personnalisable très intuitive et réactive.
Configuration initiale du projet
Installation des dépendances : Commencez par installer React, Howler.js, et des icônes utiles comme Lucide React pour une interface esthétique.
npx create-react-app audio-player
cd audio-player
npm install howler lucide-reactCréation des composants : Dans notre exemple, nous allons construire un composant AudioPlayer contenant notre logique de gestion de pistes, les boutons de lecture et de navigation, et le contrôle de volume.
Configuration de la structure : Voici le fichier de départ pour notre lecteur audio en utilisant les bibliothèques installées.
Création d’une interface de lecteur audio en React
Pour commencer, créons une interface réactive en définissant nos pistes audio dans un tableau et en initialisant l’état pour gérer la piste en cours, le volume et l’état de lecture.
"use client";import { useState, useEffect } from 'react';
import { Howl } from 'howler';
import { Play, Pause, SkipBack, SkipForward, Disc, CirclePlay, Minus, Plus } from 'lucide-react';interface Track {
src: string;
nom: string;
}const tracks: Track[] = [
{ src: '/audio/audio-1.mp3', nom: 'Instrumental 1' },
{ src: '/audio/audio-2.mp3', nom: 'Instrumental 2' },
{ src: '/audio/audio-3.mp3', nom: 'Instrumental 3' },
{ src: '/audio/audio-4.mp3', nom: 'Instrumental 4' },
];const AudioPlayer = () => {
const [currentTrackIndex, setCurrentTrackIndex] = useState(0);
const [isPlaying, setIsPlaying] = useState(false);
const [howl, setHowl] = useState<Howl | null>(null);
const [volume, setVolume] = useState(1);
Gestion des pistes audio
Les pistes audio sont définies dans un tableau contenant chaque source de fichier et nom. Cela permet de naviguer facilement d’une piste à l’autre en fonction de l’index.
useEffect(() => {
const newHowl = new Howl({
src: [tracks[currentTrackIndex].src],
onend: handleNextTrack,
volume: volume,
});setHowl(newHowl);
setIsPlaying(false);return () => {
newHowl.unload();
};
}, [currentTrackIndex]);
Cet useEffect réinitialise le lecteur chaque fois que la piste change. À chaque modification de currentTrackIndex, une nouvelle instance de Howl est créée pour la piste en cours, et la précédente est déchargée.
Fonctionnalités avancées : Lecture, Pause, Volume, et Navigation
Lecture et pause : Le bouton de lecture bascule l’état de isPlaying et utilise Howler.js pour jouer ou mettre en pause le fichier audio.
const handlePlayPause = () => {
if (howl) {
if (isPlaying) {
howl.pause();
} else {
howl.play();
}
setIsPlaying(!isPlaying);
}
};
Navigation entre les pistes : Deux boutons permettent de passer à la piste suivante ou précédente, en gérant le cycle de l’index pour revenir à la première ou dernière piste lorsque nécessaire.
const handleNextTrack = () => {
setCurrentTrackIndex((prevIndex) =>
prevIndex === tracks.length - 1 ? 0 : prevIndex + 1
);
setIsPlaying(false);
};const handlePrevTrack = () => {
setCurrentTrackIndex((prevIndex) =>
prevIndex === 0 ? tracks.length - 1 : prevIndex - 1
);
setIsPlaying(false);
};
Ajustement du volume : Utilisez deux boutons pour augmenter et diminuer le volume de la piste en cours.
const adjustVolume = (delta: number) => {
setVolume((prevVolume) => {
const newVolume = Math.min(Math.max(prevVolume + delta, 0), 1);
return newVolume;
});
};
Enfin, nous créons une interface utilisateur pour naviguer facilement entre les pistes et ajuster le volume :
return (
<div className="flex flex-col items-center justify-center p-6 bg-white text-white rounded-xl shadow-lg">
<div className="relative w-full h-full rounded-xl flex flex-col items-center justify-between p-4">
<div className="border p-4 rounded-md bg-[#f1f1f1] text-gray-400">
<ul className="space-y-2">
{tracks.map((track, index) => (
<li key={index} onClick={() => handleTrackSelect(index)} className={`flex items-center justify-between p-3 rounded-lg cursor-pointer transition-colors ${currentTrackIndex === index ? 'text-gray-900' : ''}`}>
<div className="flex items-center space-x-3">
{currentTrackIndex === index ? <CirclePlay size={24} /> : <Disc size={24} />}
<span>{track.nom}</span>
</div>
</li>
))}
</ul>
</div>
<div className="relative mt-6 rounded-full border-4 border-gray-600 flex items-center justify-center bg-gray-300">
<div className="w-[150px] h-[150px] flex items-center justify-center relative">
<button onClick={handlePrevTrack} className="absolute left-2 text-gray-800 hover:text-gray-900 transition-colors" aria-label="Previous track"><SkipBack size={24} /></button>
<button onClick={handlePlayPause} className="p-4 bg-black text-white rounded-full shadow-lg hover:bg-gray-900 transition-all focus:outline-none" aria-label={isPlaying ? 'Pause' : 'Play'}>{isPlaying ? <Pause size={32} /> : <Play size={32} />}</button>
<button onClick={handleNextTrack} className="absolute right-2 text-gray-800 hover:text-gray-900 transition-colors" aria-label="Next track"><SkipForward size={24} /></button>
<button onClick={() => adjustVolume(-0.1)} className="absolute bottom-2 text-gray-800 hover:text-gray-900 transition-colors" aria-label="Decrease volume"><Minus size={24} /></button>
<button onClick={() => adjustVolume(0.1)} className="absolute top-2 text-gray-800 hover:text-gray-900 transition-colors" aria-label="Increase volume"><Plus size={24} /></button>
</div>
</div>
</div>
</div>
);
Conclusion
Grâce à Howler.js et React, nous avons mis en place un lecteur audio fonctionnel et personnalisable. Ce lecteur inclut la navigation entre plusieurs pistes, le contrôle de lecture/pause, et l’ajustement de volume. Ce projet démontre comment intégrer une bibliothèque JavaScript comme Howler.js dans un environnement React pour créer des applications audio intuitives et modernes.
Pour approfondir vos connaissances en React et maîtriser ces nouvelles fonctionnalités, n’hésitez pas à rejoindre ma formation dédiée à React JS, où vous apprendrez à créer des applications performantes et réactives.
je pense que la partie redux manque de TP
Merci beaucoup pour la formation c'est top
Bonjour certaines sections sont en cours d'écriture bien à vous Jonathan
Hello Gregory, Merci pour ton retour et ton soutien, Pour répondre à t'as question, non tu peut utiliser Yup sans…
Excellent Article mais est-on "obligé" d'utiliser React Hook Form ? Yup est une solution vraiment excellente et la mise en…