
Show HN: Web DSP audio editor - janesconference
https://dsp.audio/editor/
======
janesconference
Creator here, happy to answer any questions! Here's an example delay effect:
[https://dsp.audio/editor/QbQuSG8sMKsMnrqgf7NB/1](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...](https://developers.google.com/web/updates/2017/12/audio-worklet)

~~~
WhyDoPeople
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)?

~~~
janesconference
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.

~~~
stuntkite
Have you considered using Open Sound Control[0]? There is a nice JS package
for it. I've put together a couple demo web apps using OSC as both client and
server. Bonuses include that you get midi with it, it creates RESTful 2 way
interfaces for your endpoints, can be shared over the internet (WebRTC), and
it's universally easy to hook to other stuff! Also there is a FANTASTIC
customizable interface app for iOS and Android called TouchOSC[1] that only
costs $5. I use it for music and robotics.

[0]
[https://github.com/colinbdclark/osc.js/](https://github.com/colinbdclark/osc.js/)

[1]
[https://hexler.net/software/touchosc](https://hexler.net/software/touchosc)

BONUS OSC STUFF:

* [https://github.com/sebpiq/rhizome](https://github.com/sebpiq/rhizome)

* [https://github.com/attwad/python-osc](https://github.com/attwad/python-osc)

* [https://github.com/thomasfredericks/UnityOSC](https://github.com/thomasfredericks/UnityOSC)

* [https://github.com/automata/osc-web](https://github.com/automata/osc-web)

* [https://github.com/mhroth/tinyosc](https://github.com/mhroth/tinyosc)

~~~
jcelerier
shameless self-promotion: I work on a free software OSC sequencer:
[https://ossia.io](https://ossia.io)

~~~
stuntkite
I have been looking for this for years. Awesome self promotion.

------
janesconference
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
Very cool! Is there a link to the repo? I didn't see one...

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

------
stevehiehn
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](http://treblemaker.ai)

~~~
janesconference
That's _really_ good! I'll take a look as soon as I get home.

------
stagas
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](https://github.com/opendsp)

~~~
janesconference
That is a goldmine, thanks!!

~~~
stagas
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](http://wavepot.com/stagas)

------
okket
(Chrome only)

~~~
arendtio
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...

~~~
janesconference
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/](https://www.w3.org/TR/webaudio/)

~~~
lloeki
Qualifying browsers that don't follow an early adopter in implementing a
working draft of being "old" is kind of odd and disparaging. A simple message
like "Sadly your browser does not seem to support spec foo yet, but you can
try one of those: browser X v>42, Y, Z".

~~~
dkersten
There’s an “or” in that sentence: “old _or_ unsupported browser”

~~~
giancarlostoro
The term unsupported browser sounds like it's intentionally only for Chrome.

~~~
janesconference
That's true, that's inaccurate. I'll change the message with the next deploy.

------
Tade0
Looks great!

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

~~~
janesconference
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.

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

[https://github.com/aguaviva/SimpleMidi](https://github.com/aguaviva/SimpleMidi)

------
acarabott
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?

~~~
janesconference
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
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...

~~~
janesconference
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
> run Web Audio API plugins as VSTs

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

~~~
janesconference
I don't have a public link to the method they used, but I heard of this
technique on the Web Audio Slack channel, which you can join here:
[https://web-audio.slack.com/](https://web-audio.slack.com/). Basically, as I
understood it, they found a way to wrap the Chrome runtime in a VST plugin and
load it in a DAW. I guess the process can be optimised, but I'm no browser
internals expert. The community is quite friendly, so if you're interested you
could join it and ask, I'm sure they'll be happy to share with you.

------
lewisjoe
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.

~~~
janesconference
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
Doesn't seem to play on Android 6, Chrome.

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

