Web FM synthesizer made with HTML5
taktech.orgIt has click artifacts in my browser (Firefox).
PS. I've recently implemented an FM / additive / modular synthesizer entirely in SQL: https://github.com/ClickHouse/NoiSQL
I have a question regarding this formatting style:
I see this used a lot in Haskell, nix, and sometimes other languages (first time here with SQL)44100 AS sample_frequency , number AS tick , tick / sample_frequency AS time. I personally find it very odd to read
. It feels like starting a sentence with a dot, instead of ending it with one, which feels quite jarring
. What is the primary motivation for employing this style, especially in languages (like SQL) where this doesn't seem to be the norm? And especially for the languages (Haskell, nix) where this is the standard (?) coding style, wouldn't it be preferable to use a different token as the separator, one that doesn't look as odd at the beginning of a line?
Less diff noise when adding/removing lines in a commit.
If you put the comma at the end, and then you need to add a line, you either:
* Insert the new item "in the middle" of the list. This is often possible, but not always.
* Add the new item to the end of the list, in which case the the line that was at the end before will now need to be modified to add a line.
Lines that begin with the coma can be more easily moved around/resorted. With the comma at the end, if you put the "last" item in the middle, you also need to add a comma at its end (and remove the comma from the new item that is now the final one).
Personally, I like languages where you can simply leave a comma at the end of a list or enumeration without this being deemed a syntax error (for example, in Lua the table {1,2,3,} is equivalent to {1,2,3} )
Aesthetically: Keeps the names lined up nice.
Practically: Overkill to avoid "no final commas in JSON" moments.
Haven't logged into my hn account in ages. But I did to say this: Awesome.
Confirm click artifacts in Firefox.
Wow. That's pretty insane. In a positive way :)
Absolutely insane concept! Bravo!
Very neat! Though I got prominent clicks and artifacts in both chrome and firefox.
If anyone's interested, some years ago I made a wrapper library for things like this, to wallpaper over the famously hairy WebAudio synthesis API. Basically you pass in a static object describing the audio graph and parameters you want, and the lib creates the WebAudio nodes and then cleans them up after the sound releases (hopefully without clicks, unless you specifically want them).
Nice one! At BBC R&D we built a similar declarative library for React https://github.com/bbc/r-audio
clicks are challenging for web audio. your project looks great. I have a similar work here. Hopefully it can achieve performant audio synthesis in browsers:
This is REALLY cool! I love WebAudio. Things that can be achieved with it, plus new speech recognition tech, plus other AI stuff, I think are going to be truly incredible!
Audio processing and synthesis is one of those things where you can do high quality in real time on mobile devices, and achieve delicious fast feedback loops. Creating new interactive modes of creativity! It's less possible with video because of the complexity and added cost. Right now anyway.
So exciting! I know the synth may look simple, but it's my feeling that it's really well made.
Regarding commenters mentioning click artefacts...that's troubling! I personally did not encounter it here, but I find, quite strangely I think, that: click artefacts are almost a "Random" bug. They show up sometimes, but not other times, even if everything else is seemingly the same.
That's been my experience. Maybe it's an "artefact" (pun intended) of dealing so closely with hardware. I don't know! Any experts want to weigh in on a way to avoid click crunches in WebAudio?? :)
edits in italic:
I found the GitHub repo: https://github.com/mizuhiki/webfmsynth from 11 years ago!!!! :) ;px xx ;p
More fascinatingly it seems the original genesis of this project and its innovations came from the guy's academic work: https://github.com/mizuhiki/webfmsynth/blob/2cd2655fb5f8e1f7...
https://github.com/chaosprint/glicol
you can check my project; audio synthesis in browsers without gc
Cool, thank you! :)
Post a Show HN
As in most cases, "HTML5" has little to do with this and it's all javascript.
TFA is old enough that the "HTML5" here means "as opposed to Flash".
the only downside to flash going away was zombo.com no longer works correctly.
You scared me for a sec. Life is dull without that site. I did check right away and it does work. Phew ;)
RIP autoplay...
Then it'd be DHTML
Newp. DHTML as a term is way older, and referred to earlier things.
Browser audio support came about with HTML5, the js APIs used for this sort of thing were to support the <audio/>
It's an okay catch-all term for "browser technology from after 2010" I suppose, like how DHTML was a catch-all for HTML + JS and AJAX for fetching things from JS.
HTML means: HTML, CSS and Javascript so...
This is really amazing, but a part of me is really sad this reminds me of the Actionscript 3 Audio API, which I used to build something similar, more than a decade ago while in undergrad.
Looking into it, it's kind of crazy it's an ECMAScript standard, and that its spiritual successor is TypeScript.
I wrote a bit about this a few years ago in case people want to know more about this: https://evertpot.com/ecmascript-4-the-missing-version/
Language aside. Flash offered so much. I wonder if we're mostly caught up now, but it's taken years!
Specifically in connection with synthesis, consider reading up on the history of the Music N language family.
https://en.wikipedia.org/wiki/MUSIC-N
This goes back to 1957, and as the article notes, is the parent of many of the most used synthesis languages right down to the present day (which is both good and bad).
In case anyone else convinced themselves that iOS doesn't support the Web Audio API, try turning off silent mode with the physical switch on the side of your phone.
I found the wikipedia article [1] on the subject to be helpful to understand a little bit whats going on here.
I wonder if there's more performant wasm implementations that can interface with the WebAudio API [2]? Quick search brings up things like [3]
[1] https://en.wikipedia.org/wiki/Frequency_modulation_synthesis
[2] https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_A...
The more code-oriented folk might like Glicol https://glicol.org/
And Sonic Pi, perhaps: https://sonic-pi.net/
Is there no way to play the notes on the keyboard (without clicking)?
Here you go! I made some javascript to put in the js console to enable keyboard binding (a through ' for white keys and w through ] for black keys)
https://gist.github.com/jacobd/e08fc227671328f6de5cd5a337262...
it seems to support webmidi, so you could plug in a midi keyboard, or use an application that generates midi.
I was wondering the same, the ASD.. keys should ideally be the piano keys, like in most software synths
As opposed to AM: https://fulldecent.github.io/system-bus-radio/
I wrote some javascript to put in the js console to enable keyboard binding (a through ' for white keys and w through ] for black keys)
https://gist.github.com/jacobd/e08fc227671328f6de5cd5a337262...
This also enables multi-key support so you can have chords and whatnot
There is also http://mmontag.github.io/dx7-synth-js/ which has a much more feature-complete FM synth, but likely use WASM, not pure JavaScript.
On an old macbook pro 2013...no clicking in Firefox...
This is really cool. The only thing I found kind of odd was you click the down arrow to increase the program number instead of up.
Interesting thing. It does have clicking sound artifacts though. Is it the programming or some GC / other periodic thing in a browser kicking in?
There is also https://plypp.net/
Great work, still feels impossible to program though! ;)
I was planning to get work done this morning...
Amazing work.
awesome! I actually have this synth on ios as well. Can't have enough FM.
(2016)?
Wow, this is amazing work!!
Thanks for killing my browser