7 ms·

Web FM synthesizer made with HTML5

260 points by __anon-2023__ 3y ago

bqmjjx0kac 3y ago
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.
38 3y ago
Thanks for killing my browser
yawnxyz 3y ago
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.
- deleted 3y ago
  [deleted]
- treve 3y ago
  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/ 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 3y ago
    Specifically in connection with synthesis, consider reading up on the history of the Music N language family. https://en.wikipedia.org/wiki/MUSIC-N 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).
zX41ZdbW 3y ago
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 https://github.com/ClickHouse/NoiSQL
- deleted 3y ago
  [deleted]
- terlisimo 3y ago
  Wow. That's pretty insane. In a positive way :)
- g105b 3y ago
  Absolutely insane concept! Bravo!
- denton-scratch 3y ago
  Confirm click artifacts in Firefox.
- cbrpnk 3y ago
  Haven't logged into my hn account in ages. But I did to say this: Awesome.
- rollcat 3y ago
  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 3y ago
xeckr 3y ago
Amazing work.
JSavageOne 3y ago
Is there no way to play the notes on the keyboard (without clicking)?
- ruined 3y ago
  it seems to support webmidi, so you could plug in a midi keyboard, or use an application that generates midi.
- gka 3y ago
  I was wondering the same, the ASD.. keys should ideally be the piano keys, like in most software synths
- jacobdehart 3y ago
  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/e08fc227671328f6de5cd5a337262396 https://gist.github.com/jacobd/e08fc227671328f6de5cd5a337262...
roymj88 3y ago
Wow, this is amazing work!!
fenomas 3y ago
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 https://github.com/fenomas/wasgen
- chaosprint 3y ago
  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/ https://glicol.js.org/
- fiala__ 3y ago
  Nice one! At BBC R&D we built a similar declarative library for React https://github.com/bbc/r-audio https://github.com/bbc/r-audio
Rodeoclash 3y ago
Great work, still feels impossible to program though! ;)
dimatura 3y ago
awesome! I actually have this synth on ios as well. Can't have enough FM.
ChrisArchitect 3y ago
(2016)?
keepamovin 3y ago
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 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/2cd2655fb5f8e1f77302883930aa470cebfeca3d/waapisim.js https://github.com/mizuhiki/webfmsynth/blob/2cd2655fb5f8e1f7...
- chaosprint 3y ago
  https://github.com/chaosprint/glicol https://github.com/chaosprint/glicol you can check my project; audio synthesis in browsers without gc
  - keepamovin 3y ago
    Cool, thank you! :) Post a Show HN
assimpleaspossi 3y ago
As in most cases, "HTML5" has little to do with this and it's all javascript.
- fenomas 3y ago
  TFA is old enough that the "HTML5" here means "as opposed to Flash".
  - sumtechguy 3y ago
    the only downside to flash going away was zombo.com no longer works correctly.
    - FpUser 3y ago
      You scared me for a sec. Life is dull without that site. I did check right away and it does work. Phew ;)
      - sumtechguy 3y ago
        RIP autoplay...
  - marban 3y ago
    Then it'd be DHTML
    - fenomas 3y ago
      Newp. DHTML as a term is way older, and referred to earlier things.
- ioseph 3y ago
  Browser audio support came about with HTML5, the js APIs used for this sort of thing were to support the <audio/>
- Cthulhu_ 3y ago
ecmascript 3y ago
There is also https://plypp.net/ https://plypp.net/
otikik 3y ago
The more code-oriented folk might like Glicol https://glicol.org/ https://glicol.org/
- rippeltippel 3y ago
  And Sonic Pi, perhaps: https://sonic-pi.net/ https://sonic-pi.net/
FpUser 3y ago
Interesting thing. It does have clicking sound artifacts though. Is it the programming or some GC / other periodic thing in a browser kicking in?
stall84 3y ago
I was planning to get work done this morning...
YoshiRulz 3y ago
As opposed to AM: https://fulldecent.github.io/system-bus-radio/ https://fulldecent.github.io/system-bus-radio/
anonu 3y ago
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 https://en.wikipedia.org/wiki/Frequency_modulation_synthesis [2] https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_A... [3] https://github.com/a-cordier/wasm-audio https://github.com/a-cordier/wasm-audio
cronix 3y ago
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 3y ago
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/e08fc227671328f6de5cd5a337262396 https://gist.github.com/jacobd/e08fc227671328f6de5cd5a337262... This also enables multi-key support so you can have chords and whatnot
herschel113 3y ago
There is also http://mmontag.github.io/dx7-synth-js/ http://mmontag.github.io/dx7-synth-js/ which has a much more feature-complete FM synth, but likely use WASM, not pure JavaScript.

260 points by __anon-2023__ 3y ago

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.

38 3y ago

Thanks for killing my browser

yawnxyz 3y ago

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.

deleted 3y ago
[deleted]
treve 3y ago
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/ 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 3y ago
  Specifically in connection with synthesis, consider reading up on the history of the Music N language family. https://en.wikipedia.org/wiki/MUSIC-N 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).

zX41ZdbW 3y ago

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 https://github.com/ClickHouse/NoiSQL

deleted 3y ago
[deleted]
terlisimo 3y ago
Wow. That's pretty insane. In a positive way :)
g105b 3y ago
Absolutely insane concept! Bravo!
denton-scratch 3y ago
Confirm click artifacts in Firefox.
cbrpnk 3y ago
Haven't logged into my hn account in ages. But I did to say this: Awesome.
rollcat 3y ago
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 3y ago

xeckr 3y ago

Amazing work.

JSavageOne 3y ago

Is there no way to play the notes on the keyboard (without clicking)?

ruined 3y ago
it seems to support webmidi, so you could plug in a midi keyboard, or use an application that generates midi.
gka 3y ago
I was wondering the same, the ASD.. keys should ideally be the piano keys, like in most software synths
jacobdehart 3y ago
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/e08fc227671328f6de5cd5a337262396 https://gist.github.com/jacobd/e08fc227671328f6de5cd5a337262...

roymj88 3y ago

Wow, this is amazing work!!

fenomas 3y ago

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 https://github.com/fenomas/wasgen

chaosprint 3y ago
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/ https://glicol.js.org/
fiala__ 3y ago
Nice one! At BBC R&D we built a similar declarative library for React https://github.com/bbc/r-audio https://github.com/bbc/r-audio

Rodeoclash 3y ago

Great work, still feels impossible to program though! ;)

dimatura 3y ago

awesome! I actually have this synth on ios as well. Can't have enough FM.

ChrisArchitect 3y ago

(2016)?

keepamovin 3y ago

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 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/2cd2655fb5f8e1f77302883930aa470cebfeca3d/waapisim.js https://github.com/mizuhiki/webfmsynth/blob/2cd2655fb5f8e1f7...

chaosprint 3y ago
https://github.com/chaosprint/glicol https://github.com/chaosprint/glicol you can check my project; audio synthesis in browsers without gc
- keepamovin 3y ago
  Cool, thank you! :) Post a Show HN

assimpleaspossi 3y ago

As in most cases, "HTML5" has little to do with this and it's all javascript.

fenomas 3y ago
TFA is old enough that the "HTML5" here means "as opposed to Flash".
- sumtechguy 3y ago
  the only downside to flash going away was zombo.com no longer works correctly.
  - FpUser 3y ago
    You scared me for a sec. Life is dull without that site. I did check right away and it does work. Phew ;)
    - sumtechguy 3y ago
      RIP autoplay...
- marban 3y ago
  Then it'd be DHTML
  - fenomas 3y ago
    Newp. DHTML as a term is way older, and referred to earlier things.
ioseph 3y ago
Browser audio support came about with HTML5, the js APIs used for this sort of thing were to support the <audio/>
Cthulhu_ 3y ago

ecmascript 3y ago

There is also https://plypp.net/ https://plypp.net/

otikik 3y ago

The more code-oriented folk might like Glicol https://glicol.org/ https://glicol.org/

rippeltippel 3y ago
And Sonic Pi, perhaps: https://sonic-pi.net/ https://sonic-pi.net/

FpUser 3y ago

Interesting thing. It does have clicking sound artifacts though. Is it the programming or some GC / other periodic thing in a browser kicking in?

stall84 3y ago

I was planning to get work done this morning...

YoshiRulz 3y ago

As opposed to AM: https://fulldecent.github.io/system-bus-radio/ https://fulldecent.github.io/system-bus-radio/

anonu 3y ago

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 https://en.wikipedia.org/wiki/Frequency_modulation_synthesis [2] https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_A... [3] https://github.com/a-cordier/wasm-audio https://github.com/a-cordier/wasm-audio

cronix 3y ago

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 3y ago

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/e08fc227671328f6de5cd5a337262396 https://gist.github.com/jacobd/e08fc227671328f6de5cd5a337262... This also enables multi-key support so you can have chords and whatnot

herschel113 3y ago

There is also http://mmontag.github.io/dx7-synth-js/ http://mmontag.github.io/dx7-synth-js/ which has a much more feature-complete FM synth, but likely use WASM, not pure JavaScript.