# DAW it again! An Audio Workstation for the Web

Michel Buffa, Samuel Demont

## ► To cite this version:

Michel Buffa, Samuel Demont. DAW it again! An Audio Workstation for the Web. IS2 2024 - IEEE International Symposium on the Internet of Sounds 2024, Sep 2024, Erlangen, Germany. hal-04695244

HAL Id: hal-04695244

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

Submitted on 12 Sep 2024

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_1.png" /></figure>

Distributed under a Creative Commons Attribution 4.0 International License
# DAW it again! An Audio Workstation for the Web

Michel Buffa

Université Côte d'Azur,

I3S, CNRS, INRIA

Sophia-Antipolis, France

michel.buffa@univ-cotedazur.fr

Samuel Demont

Université Côte d'Azur,

I3S, CNRS, INRIA

Sophia-Antipolis, France

samuel.demont@etu.unice.fr

**Abstract**— This article presents WAM Studio, an open-source digital audio workstation (DAW) that leverages W3C standards such as Web Audio, Web MIDI, Web Assembly, and Web Components, as well as the Web Audio Modules (WAM) plugin standard (aka "VSTs for the Web"). WAM-Studio has been developed as an open-source demonstrator of Web standards and contains examples of design and implementation of functionalities that are complex to achieve correctly (audio and MIDI recording in synchronization with other tracks, offline rendering of a project, etc.) An online demo and a GitHub repository for the source code are available<fnref n="1" />.

**Keywords**—Online Digital Audio Workstation, Web Audio, Web
Midi, WebAssembly, Web Audio Plugins, Web Audio Modules

## I. INTRODUCTION

WAM Studio is an online Digital Audio Workstation (DAW) for creating audio projects, designed as multi-track musical compositions [3]. It has been designed around the standard for Web Audio plugins and hosts called “Web Audio Modules” (or “WAM”) [2]. Each track represents a different layer of content that can be recorded, edited, played back or integrated with audio files. Some tracks can control virtual instruments, containing only the notes to be played and metadata. Users can add or delete tracks, play them individually or together, and arm them for recording (Figure 1).

<figure><img src="image_2.png" /><figcaption>Figure 1: Tracks in WAM Studio. Regions can be audio or MIDI and can overlap, be moved, deleted, split, merged, etc.</figcaption></figure>

During recording, all other tracks play simultaneously, while armed tracks record new content. In WAM-Studio, each track is a container for audio or MIDI related data, accompanied by an interactive representation of this data, editing and processing functions, and a few default parameters such as the track's volume and left/right panning. Figure 1

shows some audio tracks in WAM Studio with the associated audio buffer region (waveforms) and MIDI regions (squares) displayed and the default track controls/parameters on the left (mute/solo, record arming, volume, stereo panning, automation curve display, effects plugins). As many tracks can be displayed, scrolled during playback, zoomed and edited, we used the pixi.js library to efficiently manage drawing and interaction within an HTML canvas. This library uses GPU-accelerated WebGL rendering and offers many features for managing multiple layers on a single HTML5 canvas.

<figure><img src="image_3.png" /><figcaption>Figure 2: Audio graph of a track implementation.</figcaption></figure>

Figure 2 shows the audio graph corresponding to the processing chain of an audio track. The sound goes from left to right: first the "track player/recorder/editor" is implemented as an AudioWorklet node, using custom code to render an audio buffer or a MIDI region, then the sound goes through a chain of WAM plugins for adding audio effects then the output signal has its gain and stereo pan adjusted, then we have another AudioWorklet node for rendering volume in a canvas (VU-meter).

Plugin chains are managed using a special WAM plugin that also acts as a "mini host" (Figure 3, and 4). We call it the WAM-bank (or the "WAM pedalboard") [1]. It connects to one or more plugin servers, which return(s) the list of available plugins as a JSON array of URIs (a WAM plugin can be loaded simply using a dynamic import and its URI, see [2]). From this list of URIs, WAM plugin descriptors are retrieved, which contain metadata about the plugins: name, version, provider, thumbnail URI, type (effect or instrument), available inputs and outputs etc. When the pedalboard plugin is displayed in the DAW, the chain of active plugins is empty, and plugins can be added to the processing chain, deleted, reordered and their parameters set.

<footnote n="1">¹ https://wam-studio.i3s.univ-cotedazur.fr/, source code : https://github.com/Brotherta/wam-studio</footnote>
<figure><img src="image_4.png" /><figcaption>Figure 3: The WAM-bank plugin that manages chains of plugins (virtual instruments and audio effects) associated with each track.</figcaption></figure>

Any configuration can be saved as a named preset (e.g. "crunch guitar sound 1", "Synthesizer with ambient audio effects"). Presets can be organized into sound banks ("rock", "funk", "blues"). Managing the organization and naming of banks and presets is the responsibility of the WAM-bank plugin. The parameters exposed by this plugin correspond to all the parameters of the active preset (i.e. the sum of the parameters of the preset's plugins in the chain) and can be automated by the DAW.

<figure><img src="image_5.png" /><figcaption>Figure 4: WAM plugins associated with a track.</figcaption></figure>

WAM-Studio has been designed and implemented with care to reduce both the playback and recording latency, with audio and MIDI. A latency compensation mechanism is integrated, an input calibration tool as well (Figure 5). Details about the implementation have been published in [4].

<figure><img src="image_6.png" /><figcaption>Figure 5: Automatic estimation of latency compensation.</figcaption></figure>

WAM-Studio is a powerful online application that utilizes cutting-edge technology to enable users to playback, record audio and MIDI tracks, employ high-quality plugins (effects and virtual instruments), manage latency, and perform offline rendering. The source code is readily available (mono repository with front-end and back-end, including a simple Docker image for deployment). The project is developed in TypeScript, deliberately avoiding external frameworks, with the aim of making the code accessible to a wider audience and ensuring its long-term viability (minimal build tools). For those with a keen interest, WAM-Studio is like an "alarm clock to be disassembled» and will reveal the secrets of its design and implementation to the most curious, potentially uncovering insights into tasks that are not well-documented within the Web Audio and Web MIDI communities. Furthermore, the project serves as a compelling demonstration of the WAM plugin standard and its vast potential.

## ACKNOWLEDGMENTS

We would like to thank Antoine Vidal-Mazuy for his investment in WAM-Studio over the course of 2023 (he was its main coder and designer) and the team behind the Web Audio Modules, without which this DAW would never have existed.

This work has been supported by the French government, through the France 2030 investment plan managed by the *Agence Nationale de la Recherche*, as part of the "UCA DS4H" project, reference ANR-17-EURE-0004

## REFERENCES

[1] M. Buffa, P. Kouyoumdjian, Q. Beauchet, Y. Forner, and M.Marynowic. Making a guitar rack plugin -WebAudio Modules 2.0. In proceedings of the Web Audio Conference 2022., Cannes, France, 2022. https://doi.org/10.5281/zenodo.6769098

[2] M. Buffa, S. Ren, O. Campbell, J. Kleimola, O. Larkin, and T. Burns. 2022. Web Audio Modules 2.0 : An Open Web Audio Plugin Standard. In WWW '22 : The ACM Web Conference. 2022. ACM, France, pp 364–369. 2022 https://doi.org/10.1145/3487553.3524225

[3] M. Buffa, A. Vidal-Mazuy, L. May, & M. Winckler. WAM-Studio: A Web-Based Digital Audio Workstation to Empower Cochlear Implant Users. In IFIP Conference on Human-Computer Interaction (pp. 101-110). Cham: Springer Nature Switzerland. 2023.

[4] M. Buffa, & A. Vidal-Mazuy. WAM-studio, a Digital Audio Workstation (DAW) for the Web. In Companion Proceedings of the ACM Web Conference 2023 (pp. 543-548). 2023.