Show HN: Web DSP audio editor

133 47 8 years ago

Creator here, happy to answer any questions! Here's an example delay effect: https://dsp.audio/editor/QbQuSG8sMKsMnrqgf7NB/1 Please feel free to use the tool to prototype or show your creations around.

— Please note that the app runs only on Chrome > v66, for now, because Chrome is the only browser implementing the Audio Worklet[1] spec. Other browser will follow suit (hopefully) soon

[1] https://developers.google.com/web/updates/2017/12/audio-work...

WhyDoPeople• 8 years ago

Sorry for the dumb question as I'm not in the field, but is this meant for actual midi/audio in? I tried clicking the keys on the midi to no avail, so I would assume I would use this with an actual midi (or midi file)?

janesconference21• 8 years ago

Audio in is supported - it just uses your computer's audio in. Just press on the "Line In" checkbox on the left to allow your browser to access your audio. Alternatively, you can send a pre-set sample to the worklet by selecting it from the dropdown menu and pressing "Play"

Midi in is not supported yet, i.e. you can't press a key on your connected MIDI keyboard to send a MIDI message to the worklet yet. You can simulate it with the keyboard on the left. Quoting the Help page (accessible with the "?" button on the top right):

"The MIDI IN keyboard will send MIDI messages to the worklet's MessagePort. Messages are objects of the form {type: ['noteon' | 'noteoff'], value: { note, octave, midi, frequency } }"

Using physical MIDI controls will be supported in future releases, though.

janesconference21• 8 years ago

This is a good introduction to worklets: https://developers.google.com/web/updates/2017/12/audio-work...

These are a bunch of demos: https://googlechromelabs.github.io/web-audio-samples/audio-w...

lewisjoe• 8 years ago

A sound engineering illiterate here. But, both the project and the new API from chrome looks like something very interesting that I'd not want to miss.

Can somebody ELI5 to me, what this is about? Or point me in the right direction perhaps.

janesconference21• 8 years ago

In short, Audio Worklet is a new API which allows you to write code to generate or modify an audio signal in real time. The key point is that it runs in a separate browser thread, i.e. it doesn't have to wait for the browser painting the screen or loading stuff from the network to do the calculations necessary to generate the audio signal. This allows much smoother and continuous sound, something that was not possible before. Worklets share the interface with normal audio nodes, which means that they can be connected with other nodes (such as pre-made sample players, oscillators, filters) and even microphone / line in inputs.

This application allows you to write, test and save / share them. The idea is to have an online playground to share DSP code, like a sort of JSFiddle, but for audio.

bufferoverflow• 8 years ago

Doesn't seem to play on Android 6, Chrome.

janesconference21• 8 years ago

What did you do to try it? How does it fail?

acarabott• 8 years ago

This is great!

I especially like that you've included a share mechanism. I built an audio dsp playground before, but didn't spend enough time on it to provide that.

Are you going to add a discovery page to browse people's creations?

janesconference21• 8 years ago

Thanks! It's definitely a possibility, but first I would like to see how people use it. Not sure if it should be an hand picked mechanism (easy but time expensive) or an automatic one - people tag their creations, possibly vote them, and the most popular are shown (harder but once it's there it just works on its own)

mmjaa• 8 years ago

Nice. The only thing I don't like about it is that its browser based, because - as a musician with a room full of hardware - its hard to get over the conclusion that browser-based music tools are simply not ready for production - i.e. I would never use this on stage or in the studio. Cute experiment though...

janesconference21• 8 years ago

I understand your point of view, although there are people I know who managed to run Web Audio API plugins as VSTs :)

This particular app is meant more as a playground / sketch / sharing tool for DSP techniques, and imho it makes sense for it to be on the most immediately accessible platform, the Web.

However, it's possible to add Faust or C support to it in the future (using WebAssembly), a feature which will allow exporting your snippets directly to executable / VST.

tomduncalf• 8 years ago

run Web Audio API plugins as VSTs

Nice, I have thought about this before! Got a link?

snarfy• 8 years ago

I think this is a good way to look at it. It reminds me of shadertoy except for dsp audio.

It could be compiled with a webassembly backend and loaded, but... you could almost copy/paste the process() js function into c++ and it would compile, almost.

okket• 8 years ago

(Chrome only)

janesconference21• 8 years ago

For now, yes. But, since the app is based on a standard spec, other browser will hopefully support Web Audio Worklets soon.

— Please note that the app runs only on Chrome > v66, for
now, because Chrome is the only browser implementing the
Audio Worklet[1] spec. Other browser will follow suit
(hopefully) soon

[1] https://developers.google.com/web/updates/2017/12/audio-work...

bzbarsky• 8 years ago

Just to be clear, Audio Worklet is not "a standard spec". It's an earlyish-stage spec proposal which might well change as it goes through the standardization process.

arendtio• 8 years ago

Yeah, 'It seems you're trying to run the editor with an old or unsupported browser' is kinda odd given it just runs on Chrome...

janesconference21• 8 years ago

As soon as browser support the standard, the message will be shown less and less. Chrome was an early adopter, but Audio Worklets are part of a W3C working draft, which is the de facto standard for web audio:

https://www.w3.org/TR/webaudio/

Tade0• 8 years ago

Looks great!

Any chance of adding a piano roll for playing short melodies(and perhaps chords with the proper processor)?

janesconference21• 8 years ago

Might be! I would also like to add MIDI files drag and drop, so that you can "play" your pre-made MIDIs. There are a lot of features I would like to add, and more support for MIDI is one of them.

stevehiehn• 8 years ago

This is great! I really hope developers keep pushing the webAudioApi. Its not hard to imagine serious browser based DAWs within 5yrs. I've been doing my webaudio experiments here: http://treblemaker.ai

janesconference21• 8 years ago

That's really good! I'll take a look as soon as I get home.

janesconference21• 8 years ago

Creator here - thanks for the feedback!

For anyone interested on the stack, the visual part is React / Redux SPA. I use Firebase's Firestore as a DB (I wanted to try it and so far it's really cool) and Google Cloud Functions for the APIs. The repo is hosted on Gitlab and is a Lerna monorepo, which is amazing.

33degrees• 8 years ago

Very cool! Is there a link to the repo? I didn't see one...

janesconference21• 8 years ago

It's a private repo; I will probably open parts of it in the future.

stagas2• 8 years ago

This is cool and looks promising! If you want some DSP functions in JS, I had made some[0] in the past. They're all MIT licensed and sometimes you would need to adapt the code a bit because of the imports and globals that are implicit as these were domain specific.

[0] https://github.com/opendsp

janesconference21• 8 years ago

That is a goldmine, thanks!!

stagas2• 8 years ago

Hey glad you like them! There are some more on my personal account you can browse from here[0]. Feel free to reuse/modify, all MIT.

[0] http://wavepot.com/stagas

xchip• 8 years ago

You may like too this single file midi player that comes with a one line synthesizer

https://github.com/aguaviva/SimpleMidi

Show HN: Web DSP audio editor

Related Stories