Client side Audio Editing
Tags: webdev, webapp, software, audio
Published: 2022-06-22 06:17:39

Audio editing as an exciting topic that involve different knowledge and skills. Whether we are a professional musician or a regular user, sometimes we have to edit an audio file.
There are various audio tools, but my personal focus is on online technology. In general, the [online audio tool](https://soundcmd.com/) includes the following areas:
## Digital signal processing 
**Digital audio processing** is a sub-field of Digital signal processing. This an interesting topic that appears in life in various forms. The purpose of this process is to extract useful information from the signal. Some common applications are:
- Audio editors
- Voice recognition
- Text to speech
- Sound matching

Like [digital image processing](https://fiveko.com/), sound processing involves mathematical transformations to analyze or modify the signal.
## Web technologies
Unlike native apps, online software depends on available web technologies. Fortunately, modern web standards provide quite useful tools for manipulating and reproducing sound.

### WebAssembly
I put WebAssembly (_Wasm_) first here because I'm a big fan of this technology. It allows all kind of **software developers** to use the programming language that they love.
I prefer to work with the [emscripten compiler tool chain](https://emscripten.org/) and find it quite convenient for me.

### Web Audio API
The **Web Audio API** is an essential addition to the web standard. It gives ability to manage audio sources, apply sound filters, effects, decode media files and more.  

### WebWorker
Sometimes our web app has to do some hard work in parallel and keep the UI thread unlocked. In such cases we resort to a working thread, which we start from **WebWorker**.
One of the frequently mentioned shortcomings of the worker is the lack of DOM access. However, it has access to a large number of common objects such as WebSockets, IndexedDB, Network IO and so on.

### AudioWorklet
The **AudioWorklet** is relatively new addition to the **Web Audio API**. This tech gives ability to attach a custom JavaScript for audio processing. Like **WebWorker**, it runs in a dedicated thread  to provide low latency during sound manipulation.
**Note:** _This feature works in secure context (HTTPS) on most / all browsers!_

### WebCodecs API
The WebCodecs API is a recent extension of the web standard. As far as I know, it is currently supported by _Google Chrome_ and _Microsoft Edge_, but not by _Mozilla Firefox_.
My experience with this technology is that it works well for video encoding in **VP8** and **VP9** and **OPUS** for audio. Unfortunately, there is currently no build-in media muxer. This means that we have to use / write a separate component when we want to export WebM, MKV, MP4 or similar container. 

You may read the [Video Processing with WebCodecs article](https://web.dev/webcodecs/) for deeper details.

## Audio editor for the Web
There are different web applications for audio processing. However, I want to mention the **Sound CMD**. This [free online sound editor](https://soundcmd.com/) is still under development, but there are features that are of interest to me.

![Sound-CMD Spectrogram View](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4hyjbkmwpisev01vflcl.jpg)

- **Multi track support** - can open multiple files in separate tabs
- **Spectrogram viewer, player and editor** - Can zoom into sound spectrum to listen (or edit) isolated frequency bands.
- **Sound generator** - generate signal with different amplitude, phase or shape

## Useful resources

- [WebAssembly portal](https://webassembly.org/)
- [Web Audio API at MDN](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API)
- [AudioWorklet at MDN](https://developer.mozilla.org/en-US/docs/Web/API/AudioWorklet)
- [WebCodecs API at MDN](https://developer.mozilla.org/en-US/docs/Web/API/WebCodecs_API)
- [Sound CMD Help portal](https://soundcmd.com/manual/)