WebCodecs Audio Frontend : Construire un pipeline de traitement audio en temps réel

L'API WebCodecs est un outil puissant pour travailler avec les données audio et vidéo directement dans le navigateur. Contrairement à l'API Web Audio traditionnelle, WebCodecs offre un accès de bas niveau aux codecs, permettant aux développeurs d'implémenter des pipelines d'encodage, de décodage et de traitement personnalisés. Cela ouvre un monde de possibilités pour les applications audio en temps réel, des effets audio avancés aux plateformes de streaming en direct et de communication.

Qu'est-ce que WebCodecs Audio ?

WebCodecs Audio permet au code JavaScript d'interagir directement avec les codecs audio du navigateur. Il offre un contrôle précis sur les processus d'encodage et de décodage, offrant des avantages significatifs en termes de performances et de flexibilité par rapport aux API de plus haut niveau. En tirant parti de WebCodecs, les développeurs peuvent créer des flux de traitement audio hautement optimisés et personnalisés.

Principaux avantages de WebCodecs Audio :

• Contrôle de bas niveau : Accès direct aux paramètres du codec pour un réglage fin et une optimisation.
• Performance : Accélération matérielle pour l'encodage et le décodage, conduisant à des temps de traitement plus rapides.
• Flexibilité : Prise en charge d'un large éventail de codecs et possibilité d'implémenter une logique de traitement personnalisée.
• Capacités en temps réel : Permet la création d'applications audio réactives et interactives.

Configurer votre environnement WebCodecs Audio

Avant de plonger dans le code, il est crucial de s'assurer que votre navigateur prend en charge WebCodecs et que vous avez une compréhension de base de JavaScript et de la programmation asynchrone (Promises, async/await). La plupart des navigateurs modernes prennent en charge WebCodecs, mais c'est toujours une bonne idée de vérifier la compatibilité. Vous pouvez vérifier la compatibilité à l'aide de l'extrait de code suivant :

            
if ('AudioEncoder' in window && 'AudioDecoder' in window) {
  console.log('WebCodecs Audio est pris en charge !');
} else {
  console.log('WebCodecs Audio N\'EST PAS pris en charge dans ce navigateur.');
}

            

              
                Copy
              
            
          

Ce code vérifie si les interfaces AudioEncoder et AudioDecoder sont disponibles dans l'objet window. Si les deux sont présentes, WebCodecs Audio est pris en charge.

Construire un pipeline de traitement audio de base

Créons un exemple simple qui montre comment encoder et décoder l'audio à l'aide de WebCodecs. Cet exemple impliquera la capture de l'audio du microphone de l'utilisateur, son encodage à l'aide d'un codec spécifié, puis son décodage pour la lecture.

1. Capturer l'audio du microphone

Nous utiliserons l'API getUserMedia pour accéder au microphone de l'utilisateur. Cette API nécessite l'autorisation de l'utilisateur, il est donc important de gérer la demande d'autorisation avec élégance.

            
async function getMicrophoneStream() {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({
      audio: true,
      video: false,
    });
    return stream;
  } catch (error) {
    console.error('Erreur lors de l\`accès au microphone :', error);
    return null;
  }
}

const stream = await getMicrophoneStream();
if (!stream) {
  console.log('Accès au microphone refusé ou indisponible.');
  return;
}

const audioContext = new AudioContext();
const source = audioContext.createMediaStreamSource(stream);
const bufferSize = 4096; // Ajustez la taille du tampon si nécessaire
const scriptProcessor = audioContext.createScriptProcessor(bufferSize, 1, 1); // 1 canal d'entrée, 1 canal de sortie

source.connect(scriptProcessor);
scriptProcessor.connect(audioContext.destination);

scriptProcessor.onaudioprocess = function(event) {
  const audioData = event.inputBuffer.getChannelData(0); // Obtenir les données audio du premier canal
  // Traiter audioData ici (ex: encoder, filtrer)
  encodeAudio(audioData);
};

            

              
                Copy
              
            
          

Cet extrait de code capture l'audio du microphone et le connecte à un ScriptProcessorNode. Le gestionnaire d'événements onaudioprocess est déclenché chaque fois qu'un nouveau tampon de données audio est disponible.

2. Encoder l'audio avec WebCodecs

Maintenant, encodons les données audio à l'aide de l'API AudioEncoder. Nous allons configurer l'encodeur avec des paramètres de codec spécifiques.

            
let audioEncoder;

async function initializeEncoder(sampleRate, numberOfChannels) {
  const config = {
    codec: 'opus', // Ou 'aac', 'pcm',
    sampleRate: sampleRate,
    numberOfChannels: numberOfChannels,
    bitrate: 64000, // Ajustez le débit binaire si nécessaire
    // Ajoutez d'autres paramètres spécifiques au codec ici
  };

  audioEncoder = new AudioEncoder({
    output: encodedChunk => {
      // Gérer le segment audio encodé
      decodeAudio(encodedChunk);
    },
    error: e => {
      console.error('Erreur de l\`encodeur :', e);
    }
  });

  try {
    await audioEncoder.configure(config);
    console.log('Encodeur configuré avec succès.');
  } catch (error) {
    console.error('Échec de la configuration de l\`encodeur :', error);
  }
}

async function encodeAudio(audioData) {
  if (!audioEncoder) {
        await initializeEncoder(audioContext.sampleRate, 1); //Initialiser avec les spécifications du flux du microphone
    }
  // Créer un objet AudioData à partir du Float32Array
  const audioFrame = new AudioData({
    format: 'f32-planar',
    sampleRate: audioContext.sampleRate,
    numberOfChannels: 1,
    numberOfFrames: audioData.length,
    timestamp: performance.now(), // Utiliser un horodatage
    data: audioData
  });

  audioEncoder.encode(audioFrame);
  audioFrame.close(); // Libérer les ressources
}

            

              
                Copy
              
            
          

Ce code initialise un AudioEncoder avec la configuration de codec spécifiée. Le callback output est invoqué chaque fois que l'encodeur produit un segment encodé. La fonction encodeAudio prend les données audio brutes et les encode à l'aide de l'encodeur configuré. La configuration est cruciale : expérimentez avec différents codecs (opus, aac) et débits binaires pour obtenir une qualité et des performances optimales pour votre cas d'utilisation spécifique. Tenez compte de la plateforme cible et des conditions du réseau lors de la sélection de ces paramètres. Le format 'f32-planar' est crucial et doit correspondre au format des données AudioBuffer entrantes, qui est généralement un Float32Array. L'horodatage est utilisé pour aider à maintenir la synchronisation audio.

3. Décoder l'audio avec WebCodecs

Maintenant, décodons les segments audio encodés à l'aide de l'API AudioDecoder.

            
let audioDecoder;

async function initializeDecoder(sampleRate, numberOfChannels) {
  const config = {
    codec: 'opus', // Doit correspondre au codec de l'encodeur
    sampleRate: sampleRate,
    numberOfChannels: numberOfChannels,
    // Ajoutez d'autres paramètres spécifiques au codec ici
  };

  audioDecoder = new AudioDecoder({
    output: audioFrame => {
      // Gérer la trame audio décodée
      playAudio(audioFrame);
    },
    error: e => {
      console.error('Erreur du décodeur :', e);
    }
  });

  try {
    await audioDecoder.configure(config);
    console.log('Décodeur configuré avec succès.');
  } catch (error) {
    console.error('Échec de la configuration du décodeur :', error);
  }
}

async function decodeAudio(encodedChunk) {
    if (!audioDecoder) {
        await initializeDecoder(audioContext.sampleRate, 1); //Initialiser avec les spécifications du flux du microphone
    }
  audioDecoder.decode(encodedChunk);
}

            

              
                Copy
              
            
          

Ce code initialise un AudioDecoder avec une configuration qui correspond à celle de l'encodeur. Le callback output est invoqué chaque fois que le décodeur produit une trame audio décodée. La fonction decodeAudio prend le segment encodé et le décode. Le codec utilisé dans la configuration du décodeur *doit* correspondre au codec utilisé dans la configuration de l'encodeur.

4. Lire l'audio décodé

Enfin, lisons l'audio décodé à l'aide de l'API Web Audio.

            
async function playAudio(audioFrame) {
  // Créer un AudioBuffer à partir de l'AudioData
  const numberOfChannels = audioFrame.numberOfChannels;
  const sampleRate = audioFrame.sampleRate;
  const length = audioFrame.numberOfFrames;
  const audioBuffer = audioContext.createBuffer(numberOfChannels, length, sampleRate);

  for (let channel = 0; channel < numberOfChannels; channel++) {
    const channelData = audioBuffer.getChannelData(channel);
    const frame = new Float32Array(length);
    await audioFrame.copyTo(frame, { planeIndex: channel });
    channelData.set(frame);
  }
  // Créer une source de tampon et lire l'audio
  const source = audioContext.createBufferSource();
  source.buffer = audioBuffer;
  source.connect(audioContext.destination);
  source.start();

  audioFrame.close(); // Libérer les ressources
}

            

              
                Copy
              
            
          

Ce code crée un AudioBuffer à partir de la trame audio décodée, puis utilise un nœud BufferSource pour lire l'audio via la destination du contexte audio. L'étape cruciale ici est de copier les données de l'`AudioFrame` dans les données de canal de l'`AudioBuffer`. Vous devez itérer sur chaque canal. Après la lecture, assurez-vous de libérer les ressources utilisées par l'`AudioFrame`.

Techniques avancées de traitement audio

WebCodecs Audio ouvre la porte à un large éventail de techniques avancées de traitement audio. Voici quelques exemples :

1. Filtrage audio

Vous pouvez implémenter des filtres audio personnalisés en manipulant directement les données audio. Cela vous permet de créer des effets comme l'égalisation, la réduction du bruit et la réverbération.

            
function applyHighPassFilter(audioData, cutoffFrequency, sampleRate) {
  const rc = 1.0 / (2 * Math.PI * cutoffFrequency);
  const dt = 1.0 / sampleRate;
  const alpha = dt / (rc + dt);

  let previousValue = audioData[0];
  for (let i = 1; i < audioData.length; i++) {
    const newValue = alpha * (previousValue + audioData[i] - previousValue);
    audioData[i] = newValue;
    previousValue = newValue;
  }
  return audioData;
}

            

              
                Copy
              
            
          

Ce code implémente un simple filtre passe-haut. Vous pouvez modifier ce code pour créer différents types de filtres, tels que des filtres passe-bas, passe-bande et coupe-bande. N'oubliez pas que l'implémentation spécifique du filtre dépendra de l'effet souhaité et des caractéristiques des données audio.

2. Visualisation audio

Vous pouvez visualiser les données audio en analysant le spectre de fréquences et l'amplitude. Cela peut être utilisé pour créer des visualisations interactives qui réagissent à l'audio.

            
function visualizeAudio(audioData) {
  const canvas = document.getElementById('audio-visualizer');
  const ctx = canvas.getContext('2d');
  const width = canvas.width;
  const height = canvas.height;

  ctx.clearRect(0, 0, width, height);

  const barWidth = width / audioData.length;
  for (let i = 0; i < audioData.length; i++) {
    const barHeight = audioData[i] * height / 2; // Mettre à l'échelle l'amplitude à la hauteur du canevas
    ctx.fillStyle = 'rgb(' + (barHeight + 100) + ',50,50)';
    ctx.fillRect(i * barWidth, height / 2 - barHeight / 2, barWidth, barHeight);
  }
}

            

              
                Copy
              
            
          

Ce code visualise les données audio sous la forme d'une série de barres verticales. La hauteur de chaque barre correspond à l'amplitude de l'audio à ce moment précis. Des visualisations plus avancées peuvent être créées en utilisant des techniques comme la Transformation de Fourier Rapide (FFT) pour analyser le spectre de fréquences.

3. Effets audio en temps réel

Vous pouvez créer des effets audio en temps réel en manipulant les données audio pendant leur traitement. Cela vous permet de créer des effets comme l'écho, le chorus et la distorsion.

            
function applyEchoEffect(audioData, delay, feedback, sampleRate) {
  const delaySamples = Math.round(delay * sampleRate); // Délai en échantillons
  const echoBuffer = new Float32Array(audioData.length + delaySamples);
  echoBuffer.set(audioData, delaySamples);

  for (let i = 0; i < audioData.length; i++) {
    audioData[i] += echoBuffer[i] * feedback;
  }
  return audioData;
}

            

              
                Copy
              
            
          

Ce code implémente un simple effet d'écho. Vous pouvez modifier ce code pour créer des effets plus complexes en combinant plusieurs techniques de traitement audio. N'oubliez pas que le traitement audio en temps réel nécessite une optimisation minutieuse pour minimiser la latence et garantir une expérience utilisateur fluide.

Considérations pour un public mondial

Lors du développement d'applications audio pour un public mondial, il est important de prendre en compte les facteurs suivants :

• Support linguistique : Assurez-vous que votre application prend en charge plusieurs langues pour les invites audio, les instructions et les interfaces utilisateur.
• Accessibilité : Fournissez des méthodes de saisie alternatives pour les utilisateurs handicapés, telles que la reconnaissance vocale et la synthèse vocale.
• Conditions du réseau : Optimisez vos codecs audio et vos protocoles de streaming pour différentes conditions de réseau à travers le monde. Envisagez le streaming à débit adaptatif pour ajuster la qualité audio en fonction de la bande passante disponible.
• Sensibilité culturelle : Soyez conscient des différences culturelles dans les préférences audio et évitez d'utiliser des sons ou de la musique qui pourraient être offensants ou inappropriés dans certaines régions. Par exemple, certaines gammes musicales ou certains rythmes peuvent avoir des connotations culturelles différentes selon les régions du monde.
• Latence : Minimisez la latence pour garantir une expérience utilisateur réactive et interactive, en particulier pour les applications de communication en temps réel. Envisagez d'utiliser des techniques comme des codecs à faible latence et des protocoles réseau optimisés pour réduire la latence.

Extrait de code : Exemple complet

Voici un extrait de code complet qui intègre les concepts abordés ci-dessus :

            
// (Inclure tous les extraits de code ci-dessus : getMicrophoneStream, initializeEncoder, encodeAudio,
// initializeDecoder, decodeAudio, playAudio, applyHighPassFilter, visualizeAudio, applyEchoEffect)

async function main() {
  const stream = await getMicrophoneStream();
  if (!stream) {
    console.log('Accès au microphone refusé ou indisponible.');
    return;
  }

  const audioContext = new AudioContext();
  const source = audioContext.createMediaStreamSource(stream);
  const bufferSize = 4096;
  const scriptProcessor = audioContext.createScriptProcessor(bufferSize, 1, 1);

  source.connect(scriptProcessor);
  scriptProcessor.connect(audioContext.destination);

  scriptProcessor.onaudioprocess = function(event) {
    const audioData = event.inputBuffer.getChannelData(0);

    // Appliquer un filtre passe-haut
    const filteredAudioData = applyHighPassFilter(audioData.slice(), 400, audioContext.sampleRate);

    // Appliquer un effet d'écho
    const echoedAudioData = applyEchoEffect(filteredAudioData.slice(), 0.2, 0.5, audioContext.sampleRate);

    // Visualiser l'audio
    visualizeAudio(echoedAudioData);

    encodeAudio(audioData);
  };
}

main();

            

              
                Copy
              
            
          

Conclusion

WebCodecs Audio Frontend offre un moyen puissant et flexible de construire des pipelines de traitement audio en temps réel dans les applications web. En tirant parti du contrôle de bas niveau et de l'accélération matérielle offerts par WebCodecs, les développeurs peuvent créer des expériences audio hautement optimisées et personnalisées. Des effets audio et visualisations aux plateformes de streaming en direct et de communication, WebCodecs Audio ouvre un monde de possibilités pour l'avenir de l'audio sur le web.

Pour aller plus loin

• Documentation de l'API WebCodecs
• Documentation de l'API AudioEncoder
• Documentation de l'API AudioDecoder

Expérimentez avec différents codecs, paramètres et techniques de traitement pour découvrir tout le potentiel de WebCodecs Audio. N'ayez pas peur d'explorer des algorithmes et des visualisations personnalisés pour créer des expériences audio uniques et engageantes pour vos utilisateurs. Les possibilités sont infinies !