Comment créer un visualiseur audio avec JavaScript?
19/03/2024
•
5
min
Créer un visualiseur audio avec JavaScript implique plusieurs étapes et peut nécessiter des connaissances sur l'API Web Audio et le canevas HTML. Dans ce guide, nous allons créer un simple visualiseur de fréquence.
Voici le processus étape par étape pour faire cela :
Étape 1 : Tout d'abord, nous devons configurer notre HTML. Nous aurons besoin d'un élément audio avec des contrôles et la source du fichier audio. Nous avons également besoin d'un élément de canevas pour afficher la visualisation.
<!DOCTYPE html>
<html>
<head>
<title>Visualiseur Audio</title>
<style>
canvas {
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<audio controls>
<source src="votre-fichier-audio.mp3" type="audio/mpeg">
</audio>
<canvas id="canvas"></canvas>
<script src="main.js"></script>
</body>
</html>
Ask your specific question in Mate AI
In Mate you can connect your project, ask questions about your repository, and use AI Agent to solve programming tasks
Étape 2 : Ensuite, dans le fichier main.js, commencez par obtenir des références aux éléments audio et canevas.
var audio = document.querySelector('audio');
var canvas = document.querySelector('#canvas');
Étape 3 : Maintenant, nous allons configurer l'API Web Audio. Nous aurons besoin d'un contexte audio, d'un analyseur audio, et d'une source audio.
var audioContext = new (window.AudioContext || window.webkitAudioContext)();
var analyser = audioContext.createAnalyser();
var audioSrc = audioContext.createMediaElementSource(audio);
Étape 4 : Connectez la source à l'analyseur et l'analyseur à la destination.
audioSrc.connect(analyser);
analyser.connect(audioContext.destination);
Étape 5 : Configurez les données de fréquence et le contexte du canevas.
var frequencyData = new Uint8Array(analyser.frequencyBinCount);
var canvasContext = canvas.getContext('2d');
Étape 6 : Maintenant, créons une fonction pour mettre à jour la visualisation. Cette fonction effacera le canevas, mettra à jour les données de fréquence, passera en boucle à travers chaque fréquence, calculera la hauteur, définira le style de remplissage, et remplira ensuite le rectangle.
function update() {
requestAnimationFrame(update);
canvasContext.clearRect(0, 0, canvas.width, canvas.height);
analyser.getByteFrequencyData(frequencyData);
var barWidth = canvas.width / analyser.frequencyBinCount;
var barHeight;
var x = 0;
for (var i = 0; i < analyser.frequencyBinCount; i++) {
barHeight = frequencyData[i];
canvasContext.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)';
canvasContext.fillRect(x, canvas.height - barHeight / 2, barWidth, barHeight / 2);
x += barWidth + 1;
}
}
Étape 7 : Enfin, appelez la fonction de mise à jour pour démarrer la visualisation.
update();
N'oubliez pas d'appeler votre fichier script dans votre HTML. Avec ces étapes, vous devriez avoir un visualiseur de fréquence fonctionnel pour votre fichier audio. Vous pouvez modifier l'apparence du visualiseur en changeant les valeurs de fillStyle et fillRect dans la fonction update. Vous devrez peut-être inclure des préfixes de fournisseur pour l'API Web Audio en fonction du navigateur cible.
AI agent for developers
Boost your productivity with Mate:
easily connect your project, generate code, and debug smarter - all powered by AI.
Do you want to solve problems like this faster? Download now for free.