Firefox Developer Tools: Web Audio Editor
In Spring 2014, I was working on Mozilla's Add-on SDK (precursor to Web Extensions), and we'd meet up face-to-face twice a year with the larger Firefox Developer Tools team for a week of collaboration — time to squash challenging bugs, plan future architecture, and prototype new ideas.
With Victor Porof's help and patience on creating a new tool from scratch, I created a prototype panel inspecting Web Audio state in Firefox Developer Tools by the end of our week together. After some cleaning and testing, the Web Audio Editor landed in Nightly after a few weeks, and was enabled by default in Firefox 32.
Firefox's canvas and shader were some of my favorite developer tools — these weren't tools I'd use every day, but essential when debugging complex rendering bugs. They were the first of their kind to enable web developers to inspect canvas and WebGL state, a unique advantage for Firefox compared to other browsers' more mature tooling. Similarly, Web Audio was just enabled in Firefox 25 a few months prior, lacked introspection, and debugging audio is already a difficult, opaque experience. I wanted to explore tooling for Web Audio to extend the inspectable surface area of the web platform in Firefox.
Features
The Web Audio Editor displays the AudioContext as a directed graph in realtime, illustrating the signal flow between AudioNodes and AudioParams. Each AudioNode in the graph can be individually inspected, editing the values of its AudioParams, as well as bypassing the processing of that node completely.
While the audio tools were still only in nightly builds, they were initially revealed when I presented "Signal Processing with the Web Audio API" at JSConf US 2014. I shared several editor overviews and demos with the tools, gathering feedback from creative developers, learning what challenges they face when working with audio, and making a gigantic wish list. Over the next several months, the Web Audio Editor stabilized with bug fixes and multithreaded support, new features, and complete coverage of the platform API. I stepped down as the owner in 2016, and the tool was no longer actively maintained.
How it works
The audio tools worked almost exclusively using standard web APIs via instrumenting the Web Audio API, and reporting all method usage to the tools, similar to how the Canvas and WebGL Firefox tools. With this information, the tools can reflect the current state of the audio graph.
As a first-party developer tool, the Web Audio Editor had access to privileged features that wouldn't be possible in typical extensions or content tools. Thanks to Paul Adenot, Firefox's Web Audio implementation had a few new capabilities: AudioNode destructor events for when AudioNodes were garbage collected — necessary for the short-lived nature of nodes and how quickly the visual graph gets cluttered — and an AudioNode "bypass" property to disable processing (which can now be supported by AudioWorkletNodes, finally available in Firefox, Chromium, and Safari as of April 2021).
Deprecation
Due to relatively low usage numbers, lack of maintenance, and the success Web Extensions, several of the non-core tools were removed in Firefox 67, including the Web Audio Editor, 5 years after its release.
Modern, cross-browser devtools extensions have a lower barrier of entry for contributors compared to any web browser, and most audio tooling features can be implemented in content without privileged APIs. The spirit of the Web Audio Editor lives on in several web extensions: Chrome's Audion and Jaume Sanchez's Web Audio extension.
