HTML - Lecteur Audio

Bienvenue, futurs développeurs web ! Aujourd'hui, nous plongeons dans le monde passionnant des lecteurs audio HTML. D'ici la fin de ce tutoriel, vous serez capable de créer votre propre lecteur audio personnalisé et même d'ajouter quelques effets visuels sympas. Alors, mettons nos chapeaux de codage et commençons ce voyage musical !

HTML - Audio Player

Lecteur Audio Local avec Visualiseur

Les Bases du Lecteur Audio HTML

Avant de nous lancer dans la création d'un lecteur audio sophistiqué, intéressons-nous aux bases. HTML5 a introduit l'élément <audio>, qui rend super simple l'ajout d'audio sur vos pages web. Voici un exemple simple :

<audio controls>
<source src="your-audio-file.mp3" type="audio/mpeg">
Votre navigateur ne supporte pas l'élément audio.
</audio>

Dans ce code :

L'étiquette <audio> crée un lecteur audio.
L'attribut controls ajoute des contrôles de lecture, de pause et de volume.
L'étiquette <source> spécifie le fichier audio à lire.
Nous incluons un message de secours pour les navigateurs qui ne supportent pas l'élément <audio>.

Création d'un Lecteur Audio Personnalisé

Maintenant, créons un lecteur audio plus personnalisé. Nous utiliserons HTML, CSS et JavaScript pour construire celui-ci :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lecteur Audio Personnalisé</title>
<style>
#custom-player {
width: 300px;
padding: 20px;
background-color: #f0f0f0;
border-radius: 10px;
}
#play-pause-btn {
width: 100px;
height: 30px;
}
#seek-bar {
width: 100%;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="custom-player">
<audio id="audio-element" src="your-audio-file.mp3"></audio>
<button id="play-pause-btn">Lecture</button>
<input type="range" id="seek-bar" value="0">
</div>

<script>
const audio = document.getElementById('audio-element');
const playPauseBtn = document.getElementById('play-pause-btn');
const seekBar = document.getElementById('seek-bar');

playPauseBtn.addEventListener('click', () => {
if (audio.paused) {
audio.play();
playPauseBtn.textContent = 'Pause';
} else {
audio.pause();
playPauseBtn.textContent = 'Lecture';
}
});

audio.addEventListener('timeupdate', () => {
const progress = (audio.currentTime / audio.duration) * 100;
seekBar.value = progress;
});

seekBar.addEventListener('input', () => {
const time = (seekBar.value / 100) * audio.duration;
audio.currentTime = time;
});
</script>
</body>
</html>

Reprenons cela :

Nous créons un conteneur <div> pour notre lecteur personnalisé.
À l'intérieur, nous avons un élément <audio> (sans contrôles), un bouton de lecture/pause et une barre de recherche.
Dans le JavaScript :

Nous basculons entre lecture/pause lorsque le bouton est cliqué.
Nous mettons à jour la barre de recherche au fur et à mesure de la lecture de l'audio.
Nous permettons de chercher en cliquant sur la barre de recherche.

Ajout d'un Visualiseur

Maintenant, ajoutons un simple visualiseur pour rendre notre lecteur plus engageant. Nous utiliserons l'API Web Audio pour cela :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lecteur Audio avec Visualiseur</title>
<style>
#custom-player {
width: 300px;
padding: 20px;
background-color: #f0f0f0;
border-radius: 10px;
}
#play-pause-btn {
width: 100px;
height: 30px;
}
#seek-bar {
width: 100%;
margin-top: 10px;
}
#visualizer {
width: 300px;
height: 150px;
background-color: #000;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="custom-player">
<audio id="audio-element" src="your-audio-file.mp3"></audio>
<button id="play-pause-btn">Lecture</button>
<input type="range" id="seek-bar" value="0">
<canvas id="visualizer"></canvas>
</div>

<script>
const audio = document.getElementById('audio-element');
const playPauseBtn = document.getElementById('play-pause-btn');
const seekBar = document.getElementById('seek-bar');
const canvas = document.getElementById('visualizer');
const ctx = canvas.getContext('2d');

// Configuration du contexte audio
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const analyser = audioContext.createAnalyser();
const source = audioContext.createMediaElementSource(audio);
source.connect(analyser);
analyser.connect(audioContext.destination);

// Fonctionnalité Lecture/Pause
playPauseBtn.addEventListener('click', () => {
if (audioContext.state === 'suspended') {
audioContext.resume();
}
if (audio.paused) {
audio.play();
playPauseBtn.textContent = 'Pause';
} else {
audio.pause();
playPauseBtn.textContent = 'Lecture';
}
});

// Fonctionnalité de la barre de recherche
audio.addEventListener('timeupdate', () => {
const progress = (audio.currentTime / audio.duration) * 100;
seekBar.value = progress;
});

seekBar.addEventListener('input', () => {
const time = (seekBar.value / 100) * audio.duration;
audio.currentTime = time;
});

// Visualiseur
function drawVisualizer() {
requestAnimationFrame(drawVisualizer);

const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);
analyser.getByteFrequencyData(dataArray);

ctx.fillStyle = 'rgb(0, 0, 0)';
ctx.fillRect(0, 0, canvas.width, canvas.height);

const barWidth = (canvas.width / bufferLength) * 2.5;
let x = 0;

for (let i = 0; i < bufferLength; i++) {
const barHeight = dataArray[i] / 2;

ctx.fillStyle = `rgb(${barHeight + 100}, 50, 50)`;
ctx.fillRect(x, canvas.height - barHeight, barWidth, barHeight);

x += barWidth + 1;
}
}

drawVisualizer();
</script>
</body>
</html>

Dans cette version améliorée :

Nous ajoutons un élément <canvas> pour notre visualiseur.
Nous configurons un contexte audio et un analyzeur en utilisant l'API Web Audio. 3 La fonction drawVisualizer crée une visualisation graphique des fréquences audio.

Lecteur Audio Local avec Playlist

Maintenant, créons un lecteur qui peut gérer plusieurs pistes :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lecteur Audio avec Playlist</title>
<style>
#playlist-player {
width: 300px;
padding: 20px;
background-color: #f0f0f0;
border-radius: 10px;
}
#play-pause-btn, #prev-btn, #next-btn {
width: 80px;
height: 30px;
margin: 5px;
}
#seek-bar {
width: 100%;
margin-top: 10px;
}
#playlist {
list-style-type: none;
padding: 0;
}
#playlist li {
cursor: pointer;
padding: 5px;
}
#playlist li:hover {
background-color: #ddd;
}
</style>
</head>
<body>
<div id="playlist-player">
<audio id="audio-element"></audio>
<button id="prev-btn">Précédent</button>
<button id="play-pause-btn">Lecture</button>
<button id="next-btn">Suivant</button>
<input type="range" id="seek-bar" value="0">
<ul id="playlist">
<li data-src="song1.mp3">Chanson 1</li>
<li data-src="song2.mp3">Chanson 2</li>
<li data-src="song3.mp3">Chanson 3</li>
</ul>
</div>

<script>
const audio = document.getElementById('audio-element');
const playPauseBtn = document.getElementById('play-pause-btn');
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const seekBar = document.getElementById('seek-bar');
const playlist = document.getElementById('playlist');
let currentTrack = 0;

function loadTrack(index) {
const tracks = playlist.getElementsByTagName('li');
if (index >= 0 && index < tracks.length) {
currentTrack = index;
audio.src = tracks[currentTrack].getAttribute('data-src');
audio.load();
playPauseBtn.textContent = 'Lecture';
}
}

function playPause() {
if (audio.paused) {
audio.play();
playPauseBtn.textContent = 'Pause';
} else {
audio.pause();
playPauseBtn.textContent = 'Lecture';
}
}

playPauseBtn.addEventListener('click', playPause);

prevBtn.addEventListener('click', () => {
loadTrack(currentTrack - 1);
});

nextBtn.addEventListener('click', () => {
loadTrack(currentTrack + 1);
});

audio.addEventListener('timeupdate', () => {
const progress = (audio.currentTime / audio.duration) * 100;
seekBar.value = progress;
});

seekBar.addEventListener('input', () => {
const time = (seekBar.value / 100) * audio.duration;
audio.currentTime = time;
});

playlist.addEventListener('click', (e) => {
if (e.target.tagName === 'LI') {
const tracks = playlist.getElementsByTagName('li');
loadTrack([...tracks].indexOf(e.target));
playPause();
}
});

loadTrack(0);
</script>
</body>
</html>

Dans cette version avec playlist :

Nous créons une liste de pistes à l'aide d'une liste ordonnée.
Nous ajoutons des boutons précédent et suivant pour la navigation.
Le JavaScript gère le chargement des pistes, la lecture/pause et le passage entre les pistes.

Méthodes du Lecteur Audio

Voici un tableau des méthodes courantes du lecteur audio et de leurs descriptions :

Méthode	Description
`play()`	Commence la lecture de l'audio
`pause()`	Met en pause l'audio
`load()`	Recharge l'élément audio
`currentTime`	Obtient ou définit la position de lecture actuelle en secondes
`duration`	Obtient la durée totale de l'audio en secondes
`volume`	Obtient ou définit le volume (de 0.0 à 1.0)
`muted`	Obtient ou définit si l'audio est muet
`playbackRate`	Obtient ou définit la vitesse de lecture

Et voilà ! Vous avez maintenant appris à créer des lecteurs audio basiques et avancés en HTML, complets avec des visualiseurs et des playlists. Souvenez-vous, la pratique rend parfait, donc n'ayez pas peur d'expérimenter et de personnaliser ces exemples pour répondre à vos besoins. Bon codage, et que vos pages web soient remplies de belle musique !

Credits: Image by storyset