<figure><img src="image_1.png" /></figure>

HAL
open science

# High-performance Web-Audio applications, the challenges of writing a DAW

Michel Buffa, Antoine Vidal-Mazuy

► To cite this version:

Michel Buffa, Antoine Vidal-Mazuy. High-performance Web-Audio applications, the challenges of writing a DAW. Réunion de lancement du projet ANR DOTS, IRCAM, Oct 2023, Paris, France. hal-04337523

HAL Id: hal-04337523

https://inria.hal.science/hal-04337523v1

Submitted on 12 Dec 2023

HAL is a multi-disciplinary open access
archive for the deposit and dissemination of sci-
entific research documents, whether they are pub-
lished or not. The documents may come from
teaching and research institutions in France or
abroad, or from public or private research centers.

L'archive ouverte pluridisciplinaire HAL, est
destinée au dépôt et à la diffusion de documents
scientifiques de niveau recherche, publiés ou non,
émanant des établissements d'enseignement et de
recherche français ou étrangers, des laboratoires
publics ou privés.

<figure><img src="image_2.png" /></figure>

Distributed under a Creative Commons CC BY 4.0 - Attribution - International License
# Applications Web-Audio hautes performances, challenges à relever pour écrire un DAW

## Journée ANR DOTS

13 Octobre 2023

(Lien de la présentation :

https://tinyurl.com/4yj2ppkt)

<figure><img src="image_3.png" /></figure>

<figure><img src="image_4.png" /></figure>

Michel Buffa, Antoine Vidal-Mazuy

Université Côte d'Azur / Laboratoire I3S / INRIA, WIMMICS group,

michel.buffa@univ-cotedazur.fr, @micbuffa
# Qui suis-je ?

* Professeur à l'Université Côte d'Azur (UCA), France

* Membre de l'équipe WIMMICS commune à INRIA et au laboratoire I3S du CNRS

* W3C Advisory Committee Representative pour UCA

* Membre du W3C WebAudio Working Group depuis 2014

* michel.buffa@univ-cotedazur.fr, @micbuffa

* Membre du groupe qui a créé les Web Audio Modules aka

**“Plugins audio pour la plateforme Web”**

* Sorte de “VST pour le Web”

<figure><img src="image_5.png" /></figure>
WebAudio, WebMidi, etc.
# Concepts de l'API WebAudio

## Opérations audio dans un Audio Context

let ctx = new AudioContext();

## Conception modulaire :

* Opérations audio : **audio nodes**
  ...qui forment un **graphe audio**

let osc1 = ctx.createOscillator();

osc1-frequency.value = 440;

let gain1 = ctx.createGain();

gain1.gain.value = 0.1;

osc1.connect(gain1).connect(ctx.destination);

<figure><img src="image_6.png" /></figure>
# Architecture interne

* **Un thread de rendu** appelé "audio thread" est seul en charge du rendu sonore du graphe audio

* Contraintes temps réel fortes : thread de haute priorité. Si il ne parvient pas à fournir le prochain bloc d'échantillons sonores à temps : glitches, dropouts etc.

* **Un thread de contrôle**, exécutant en général du code JavaScript code pour la GUI, fait les appels à l'API WebAudio, gère la création et modification du graphe audio.

* connexion/déconnexion des nœuds, modifications de leurs paramètres.

* Les nœuds "standards" traitent le son dans l'audio thread

* Les algorithmes DSP sont fixes, seuls les paramètres peuvent être modifiés.

* Le nœud AudioWorklet (2018) fournit une solution pour implémenter des traitements DSP personnalisés dans l'audio thread.

* AudioWorkletNode code: main thread

* AudioWorkletProcessor code: audio thread (avec contraintes/limitations)
WebAudioModules (WAM)
audio plugins pour le Web
<figure><img src="image_7.png" /></figure>
# WAMs dans des logiciels hôtes

https://ampedstudio.com

<figure><img src="image_8.png" /></figure>

https://sequencer party/

<figure><img src="image_9.png" /></figure>

https://mainline.i3s.unice.fr/wam2/packages/_
# DAWs commerciaux

<figure><img src="image_10.png" /></figure>

Soundtrap.com (spotify)

<figure><img src="image_11.png" /></figure>

Ampedstudio.com

<figure><img src="image_12.png" /></figure>

Bandlab.com

<figure><img src="image_13.png" /></figure>

Soundation.com
# DAWs: le photoshop de l'audio

- Enregistrer, éditer, mixer des pistes audio et MIDI

- Pistes associées à des plugins (effets audio, instruments)

- Automation des paramètres

- Gérer le temps-réel et la latence!

<figure><img src="image_14.png" /></figure>
# WAM-Studio: un DAW open source compatible WAM

<figure><img src="image_15.png" /></figure>

## Motivation:

* Démonstrateur des APIs du W3C

* Pas de DAW web open source complet disponible

* Développer un DAW web: problèmes spécifiques lié à l'environnement sandboxé

<figure><img src="image_16.png" /></figure>
# Challenge 1: concevoir un framework host/plugin Web

## Groupe de travail
sur les plugins WebAudio

### Journées d'Informatique Musicale 2023

(lien présentation: https://tinyurl.com/5p62b6hn)

**Membres** : Michel Buffa et Jerome Lebrun (Université Côte d'Azur / Laboratoire I3S), Stéphane Letz (GRAME), Laurent Pottier et Shihong Ren (Université de Saint-Etienne / Laboratoire ECLLA)

Collaborateurs externes: Steven Yi (stevenyi@gmail.com), Owen Campbell (owen.campbell@gmail.com), Jari Kleimola (jari.kleimola@webaudiomodules.org), Hugo Mallet (hugo.mallet@53is.fr), Tom Burns (tom@burns.ca), Quentin Piet (quentin.plet@etu.univ-st-etienne.fr), Antoine Vidal-Mazuy (antoine.vidal-mazuy@etu.univ-cotedazur.fr)

<figure><img src="image_17.png" /></figure>

WAMs

<figure><img src="image_18.png" /></figure>

UNIVERSITE
CÔTE D'AZUR

<figure><img src="image_19.png" /></figure>

<figure><img src="image_20.png" /></figure>

<figure><img src="image_21.png" /></figure>

<figure><img src="image_22.png" /></figure>

<figure><img src="image_23.png" /></figure>

53JS

## Web Audio Modules 2.0
### An Open Standard for WebAudio Plugins

#### The Web Conference 2022
Web Developer and W3C track

April 28, 2022

(presentation link: https://tinyurl.com/2p8jvu44)

Michel Buffa (Université Côte d'Azur / Laboratoire I3S / INRIA, WIMMICS group), Shihong Ren (Université de Saint-Etienne / Laboratoire ECLLA), Owen Campbell (owen.campbell@gmail.com)

Tom Burns (tom@burns.ca), Steven Yi (stevenyi@gmail.com), Jari Kleimola (jari.kleimola@webaudiomodules.org),

ADC22

### WEBAUDIO MODULES 2.0:
#### AUDIO PLUGINS FOR THE WEB PLATFORM!

MICHEL BUFFA

<figure><img src="image_24.png" /></figure>

<figure><img src="image_25.png" /></figure>

WAMs

<figure><img src="image_26.png" /></figure>

<figure><img src="image_27.png" /></figure>

<figure><img src="image_28.png" /></figure>

<figure><img src="image_29.png" /></figure>

<figure><img src="image_30.png" /></figure>

<figure><img src="image_31.png" /></figure>

53JS
# Challenge 2 : host/plugin communication (i.e 44.1Khz)

Contrôle bas-niveau de la lecture nécessaire.
Chaque piste est un AudioWorklet
(WAMNode+WAMProcessor)

* Le processeur d'une piste communique avec les plugins à la fréquence d'échantillonnage (WAM SDK) sans quitter le thread audio !

* Automation des paramètres : [DEMO](#)

* Envoyer des notes MIDI : [DEMO](#)

<figure><img src="image_32.png" /></figure>

<figure><img src="image_33.png" /></figure>

<figure><img src="image_34.png" /></figure>

No need to schedule ahead in
time like in the famous article "A
tale of two clocks" by C.Wilson.
# Challenge 3 : gérer la latence

Latence = RETARD !

**1 - Latency Round-trip** : la durée qu'il faut pour qu'un signal, tel qu'une voix chantée ou un solo de guitare, passe d'une entrée analogique sur une interface audio, à travers les convertisseurs analogique-numérique, jusqu'au DAW, puis retourne ressorte par l'interface audio. Si cette durée est élevée, cela impacte négativement la capacité du musicien à jouer en rythme, par exemple. Elle devrait être < 20 ms.

**2 - Latence de sortie** : temps mis à un son émis par le DAW pour atteindre la sortie audio

**3 - latence d'entrée** : temps écoulé avant que l'enregistrement ne démarre dans le DAW lorsque l'on joue d'un instrument ou que l'on chante dans un microphone. Doit être prise en compte lors de l'enregistrement !

Latence d'entrée = latence round-trip - latence de sortie
# Challenge 3: compenser la latence d'entrée

1. Mesurer la latence round-trip :

a. Solution matérielle (micros en entrée et en sortie, enregistreur numérique),

b. Solution logicielle : emmetre un son du DAW, l'enregistrer et mesurer le temps écoulé (vidéo ci-dessous)

2. La latence de sortie est fournie par la WebAudio API,

3. Calculer la latence d'entrée,
   Entrée = Round-trip - Sortie

4. Décaler en arrière dans le temps les buffers audio enregistrés.

## SOLUTION INTÉGRÉE DANS LE DAW !

<figure><img src="image_35.png" /></figure>
## Challenge 4: enregistrer plusieurs pistes en même temps de manière robuste, pendant la lecture d'autres pistes...

<figure><img src="image_36.png" /></figure>

<figure><img src="image_37.png" /></figure>

<figure><img src="image_38.png" /></figure>

<figure><img src="image_39.png" /></figure>
A small projet from recording to mixing

<figure><img src="image_40.png" /></figure>
# CONCLUSION + WAM-Studio disponibilité

## WAM-Studio est en développement mais fonctionnel et stable

* Bonne démonstration des technologies du W3C pour développeurs audio

* La conception et le code montrent des bonnes pratiques pour enregistrer et gérer la latence dans un environnement sandboxé.

## WAM-Studio a des mises à jour hebdomadaires...

* Code source et image Docker [disponibles sur GitHub](https://github.com/) (front-end et back-end sont dans le même projet, image docker fournie, prêt à déployer)

* [Démo en ligne](https://wam-studio.com)

* Les parties principales de WAM-studio font l'objet de [tutoriaux en ligne](https://wam-studio.com/tutoriel)

* Tous les plugins présents dans WAM-Studio sont open-source et publiés sur le dépôt GitHub [wam-community](https://github.com/wam-community). Ils sont aussi disponibles dans d'autres hôtes (sequencer party par ex.), et via [URLs prêts à l'emploi](https://wam-studio.com/ligne-ici) demo ici!

* WAM-Studio plugin manager aussi disponible séparément ([source](https://github.com/WAM-Studio/) and [demo](https://wam-studio.com))
# WAM-Studio travail en cours...

## Fini

* Sauvegarde des projets dans le cloud,

* Viewports sur les pistes (zoom, support pour pistes de longues durées)

* Macros par type de piste (presets voix/guitare etc.)

* Grilles de mesures + tempo et key signatures

* (presque fini) : split/merge, normalize, reverse sur pistes audio

## A venir (S4 2023)

* CTRL-Z / undo

* GUI pour le routage audio (support de cartes sons > 4 entrées/sorties)

* Pistes MIDI (déjà fonctionnelles en dehors du DAW)

* Smart cache (PouchDB/IndexedDB) pour sauvegarde plus rapide des projets

## Plus tard (2024)

* Support des [WebCodecs](https://www.w3.org/TR/webcodecs/)

* Fonctionnalités collaboratives