[HN Gopher] Web FM synthesizer made with HTML5
___________________________________________________________________
Web FM synthesizer made with HTML5
Author : __anon-2023__
Score : 237 points
Date : 2023-10-30 01:53 UTC (21 hours ago)
(HTM) web link (www.taktech.org)
(TXT) w3m dump (www.taktech.org)
| 38 wrote:
| Thanks for killing my browser
| yawnxyz wrote:
| 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.
| treve wrote:
| 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!
| PaulDavisThe1st wrote:
| 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).
| xeckr wrote:
| Amazing work.
| zX41ZdbW wrote:
| It 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
| terlisimo wrote:
| Wow. That's pretty insane. In a positive way :)
| g105b wrote:
| Absolutely insane concept! Bravo!
| denton-scratch wrote:
| Confirm click artifacts in Firefox.
| cbrpnk wrote:
| Haven't logged into my hn account in ages. But I did to say
| this: Awesome.
| rollcat wrote:
| I have a question regarding this formatting style:
| 44100 AS sample_frequency , number AS tick ,
| tick / sample_frequency AS time
|
| I see this used a lot in Haskell, nix, and sometimes other
| languages (first time here with SQL)
|
| . 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?
| hiAndrewQuinn wrote:
| Aesthetically: Keeps the names lined up nice.
|
| Practically: Overkill to avoid "no final commas in JSON"
| moments.
| otikik wrote:
| 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} )
| JSavageOne wrote:
| Is there no way to play the notes on the keyboard (without
| clicking)?
| ruined wrote:
| it seems to support webmidi, so you could plug in a midi
| keyboard, or use an application that generates midi.
| gka wrote:
| I was wondering the same, the ASD.. keys should ideally be the
| piano keys, like in most software synths
| jacobdehart wrote:
| 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...
| roymj88 wrote:
| Wow, this is amazing work!!
| fenomas wrote:
| 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).
|
| https://github.com/fenomas/wasgen
| chaosprint wrote:
| 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:
|
| https://glicol.js.org/
| fiala__ wrote:
| Nice one! At BBC R&D we built a similar declarative library for
| React https://github.com/bbc/r-audio
| Rodeoclash wrote:
| Great work, still feels impossible to program though! ;)
| ChrisArchitect wrote:
| (2016)?
| dimatura wrote:
| awesome! I actually have this synth on ios as well. Can't have
| enough FM.
| keepamovin wrote:
| 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..._
| chaosprint wrote:
| https://github.com/chaosprint/glicol
|
| you can check my project; audio synthesis in browsers without
| gc
| keepamovin wrote:
| Cool, thank you! :)
|
| Post a Show HN
| assimpleaspossi wrote:
| As in most cases, "HTML5" has little to do with this and it's all
| javascript.
| fenomas wrote:
| TFA is old enough that the "HTML5" here means "as opposed to
| Flash".
| sumtechguy wrote:
| the only downside to flash going away was zombo.com no longer
| works correctly.
| FpUser wrote:
| You scared me for a sec. Life is dull without that site. I
| did check right away and it does work. Phew ;)
| marban wrote:
| Then it'd be DHTML
| fenomas wrote:
| Newp. DHTML as a term is way older, and referred to earlier
| things.
| ioseph wrote:
| Browser audio support came about with HTML5, the js APIs used
| for this sort of thing were to support the <audio/>
| Cthulhu_ wrote:
| 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.
| ecmascript wrote:
| There is also https://plypp.net/
| otikik wrote:
| The more code-oriented folk might like Glicol https://glicol.org/
| rippeltippel wrote:
| And Sonic Pi, perhaps: https://sonic-pi.net/
| FpUser wrote:
| Interesting thing. It does have clicking sound artifacts though.
| Is it the programming or some GC / other periodic thing in a
| browser kicking in?
| bqmjjx0kac wrote:
| 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.
| stall84 wrote:
| I was planning to get work done this morning...
| YoshiRulz wrote:
| As opposed to AM: https://fulldecent.github.io/system-bus-radio/
| anonu wrote:
| 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...
|
| [3] https://github.com/a-cordier/wasm-audio
| cronix wrote:
| 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.
| jacobdehart wrote:
| 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
___________________________________________________________________
(page generated 2023-10-30 23:02 UTC)