Rainfly - An AudioWorklet DSP Playground [MVP]

[terryzfeng]

This PR is to introduce Rainfly: An AudioWorklet DSP Playground for Web Audio. This online AudioWorklet IDE streamlines writing custom JavaScript AudioWorklet code, building Web Audio DSP graphs, and recording output for easy visualization, analysis and validation.

Demo: https://googlechromelabs.github.io/web-audio-samples/rainfly/

Rainfly MVP Features:

• Monaco Code Editor for writing AudioWorkletProcessor and AudioContext graph
• Realtime DSP execution via AudioContext, can pause and play
• Recording and visualization of DSP output a la Canopy
• Example AudioWorklet code and boilerplate
• Error console for JS execution error feedback
• Exporting JS code or recorded output to a .wav
• Vim support
• Built with Svelte

Authors:

• @terryzfeng
• @Kizjkre

GSoC 2024

[terryzfeng]

@hoch @mjwilson-google I've created the Rainfly directory just directly under src. Just wanted to confirm directory location or if it should be under a specific directory? It looks like eleventy builds all current directories.

[hoch]

The directory location looks good to me.

But don't we need to exclude this directory from Eleventy's scanning? Can we include that change in this PR as well?

[terryzfeng]

That sounds good. Eleventy doesn't build this directory yet but I'll make sure that it's all working. I'll copy the rainfly repo into this directory for this PR.

[hoch]

LGTM with nits

It's okay to land this as is, but I am asking to work on nits from the review as a follow-up.

[mjwilson-google]

Thanks for continuing to work on this!

I didn't try running it yet, but I have some small comments. Since Hongchan has already approved, please feel free to resolve my comments and land if necessary.