#Signal web based plus#
Here's a screenshot of the Chrome dev tools showing a profile of the signal analyzer while in use:Īs you can see, the work is spread across 4 different threads, plus the GPU.
#Signal web based code#
The interesting part of this work is the usage of very modern web tech to power it.įor this signal analyzer, almost all of the actual rendering and other heavy lifting is performed off the main thread.Įven though the core audio processing code of the application runs on a dedicated audio rendering thread via Web Audio, it's still important to keep the UI responsive so that user inputs aren't delayed and interacting with the app is smooth and jank-free. It's very useful for debugging issues with synthesizer modules or other audio generators, and it's also useful for analyzing phase relationships between multiple signals. It plots the actual waveform of the audio signal as it is played, essentially creating a live line plot of the signal's samples. The pink visualization on the bottom is the oscilloscope. It's a very useful tool when mixing multiple signals together or when performing heavy processing on signals since it helps identify imbalances in the spectrum, spot artifacts or undesired frequencies, and things like that. It plots the power of the input signal at different frequencies, and it updates live as the signal changes over time. The white visualization on top is the spectrogram. Here's what the signal analyzer ended up looking like when integrated into the main web synth app:Īnd here's a demo showing it in action (looks best on desktop): As the platform is maturing, these parts of the music-making process have been growing in importance.
Specifically, I wanted to build a module that contained a combined oscilloscope and spectrogram - that would allow simultaneous time and frequency domain views into signals.īesides being useful for debugging during development, these tools are important when mixing and mastering tracks.
I've built up a pretty substantial collection of modules for generating and manipulating audio, but one thing that was lacking was the ability to visualize audio and other signals within the app. It started as a collection of experiments with audio synthesis in the browser, and it has slowly grown into a cohesive platform for working with audio and producing music. I've been working on a web-based digital audio workstation on and off for the past few years. This inspired me to write about the individual APIs that I used, how and why they were useful for the project, and some interesting patterns they facilitate for building complex multi-threaded applications in the browser. Building this application has made it clear to me that the modern web is extremely well-suited to building complex multi-threaded and graphics-intensive applications.
0 kommentar(er)
