Afficher le spectre audio lors de la lecture d’un son – HTML5

Tout d’abord ce qui est décrit dans ce tutoriel n’est compatible qu’avec le navigateur Firefox, les propriétés utilisées n’étant pas implémenté par les concurrents pour le moment.

Nous allons donc voir comment afficher le spectre audio d’un son lors de sa lecture :

demo_spectre_audio_HTML5

Comme d’habitude on commence par le code HTML/CSS :

<!DOCTYPE html>
<html>
<head>
  <title>Démo Audio HTML5 - Niveau de son graphique</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style>
    #player {
      display: block;
    }
    #graph, #player {
      width: 500px;
    }
    #graph {
      height: 150px;
      display
    }
  </style>
  <script src="fft.js"></script>
</head>
<body>
     <audio src="music.ogg" controls="true" id="player"></audio>
     <div id="infos"></div>
     <canvas id="graph"></canvas>
</body>
</html>

On utilise un fichier Javascript externe : fft.js. Ce fichier contient des fonctions qui vont nous permettre d’analyser le flux audio lu dans le lecteur.

Au niveau du HTML on a 3 éléments :

  • le lecteur audio
  • un div pour afficher les informations du son lu
  • un canvas pour afficher le spectre audio


On va dans un premier temps définir certaines variables et événements à récupérer et définir la couleur à utiliser pour le canvas:

var channels, rate, frameBufferLength, fft;
var canvas = document.getElementById('graph');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgb(255, 128, 0)';
var audio = document.getElementById('player');
audio.addEventListener('MozAudioAvailable', drawSoundGraph, false);
audio.addEventListener('loadedmetadata', loadSoundMetaData, false);

On va appeler la fonction loadSoundMetaData dés que les meta données du son auront été chargé par le navigateur et la fonction drawSoundGraph lorsque des données à analyser seront disponibles (à la lecture du son en fait).

Définissons déjà notre première fonction :

function loadSoundMetaData() {
  channels = audio.mozChannels;
  rate = audio.mozSampleRate;
  frameBufferLength = audio.mozFrameBufferLength;
  document.getElementById('infos').innerHTML = 'Canaux : '+channels+'<br />Taux d'&eacute;chantillonnage : '+rate+'hz<br />Nombre d'&eacute;chantillons : '+frameBufferLength;
  fft = new FFT(frameBufferLength / channels, rate);
}

On affiche le nombre de canaux, le taux d’échantillonnage et le nombre d’échantillons du son chargé et enfin on utilise FFT de notre fichier javascript externe qui va permettre d’analyser le spectre audio pour que nous puissions ensuite l’afficher dans le canvas.

Créons justement une 2ème fonction qui va calculer et afficher le spectre audio du son joué :

function drawSoundGraph(event) {
  var fb = event.frameBuffer, t  = event.time;          
  var signal = new Array(fb.length / channels), value;
  for(var i = 0, fbl = frameBufferLength / channels; i < fbl; i++) {
    signal[i] = fb[channels*i];
    for(var c = 1; c < channels; c++)
      signal[i] += fb[channels*i+c];
    signal[i] = signal[i]/channels;
  }
  fft.forward(signal);
  ctx.clearRect(0,0, canvas.width, canvas.height);
  for(var i = 0; i < fft.spectrum.length; i++ ) {
    value = fft.spectrum[i] * canvas.height * 10;
    ctx.fillRect(i * 4, canvas.height, 3, -value);
  }
}

Ici on récupère le signal audio à partir de tous les canaux du fichier son (habituellement 2) puis on le passe à FFT pour l’analyse du spectre et enfin on affiche dans le canvas la valeur pour chaque fréquence du spectre audio.

Démonstration en ligneTélécharger le ZIP du tuto


Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*