AudioWorklet DSP Playground

[Kizjkre]

AudioWorklet DSP Playground

Feature list

Necessary Features

• [x] Code editor
  • [x] Monaco
• [x] Visualizer a la Canopy
• [x] Boilerplate templates/examples
• [x] Playback functionality
  • [x] Realtime?
• [x] Export
  • [x] Template
  • [x] Just AudioWorklet

Nice to Haves

• [x] Export
  • [x] WAV
  • Share button
  • Permalink
• [x] Console display
• Virtual FS?
• Web MIDI/MIDI controller support
• GUI
  • Dials and knobs for variable input into the Audio Worklet

Tech Stack

Fully client-side

• SvelteKit
  • Svelte 5
• Vite
• JavaScript

Considerations

• How to evaluate code
  • eval
  • Audion support
  • Better performance (?)
  • <iframe>s
  • Sandboxed
• Submodule

[Kizjkre]

Development here: https://github.com/Kizjkre/rainfly

[hoch]

@Kizjkre Why are we doing the development outside of this repository? I think we should consider creating a new directory for this project.

[terryzfeng]

Would putting this in it's own directory still allow having it's own package.json file? Or would it need to merge with the root-level one? I'm not super familiar...

[hoch]

I think that should be okay. Not sure how to include the top-level building process. (i.e. eleventy)

I believe we can figure out as we go, so let's unblock by iterating under the rainfly directory. :)

[terryzfeng]

New code execution contender: new Function(code, params) as opposed to eval. It looks like Canopy uses Function under the hood. Initial reading seems like eval is current/global scope, and Function creates a dedicated scope with explicit param passing

https://stackoverflow.com/questions/55074927/eval-vs-function-constructor https://www.geeksforgeeks.org/eval-vs-function-in-javascript/