Skip to content(if available)orjump to list(if available)

JavaScript retro sound effects generator

DougHaber

Years ago, I made one of these at an hackathon style event for developing HTML5 gamedev tools. I didn't know much about audio programming at the time, so I read descriptions of what parameters were and then wrote code that I thought would work similarly. I got enough wrong where the end results sound a bit different than other tools, occasionally in a good way.

This predates the WebAudio API, and so it builds data URLs as WAVs instead. Every sound can be represented as a short string, and the tool can be used as a library that procedurally generates the sounds from the strings. It also has a "song mode" where notes can be provided to guide the sound, which makes certain types of more complicated sounds possible to make, including jingles and short songs.

It's definitely dated now, but if anyone is interested, you can find it here

https://www.leshylabs.com/apps/sfMaker/

See the "Example Sounds" at the bottom of the page to hear what it can do.

smusamashah

There is also zzfx by Frank Force who makes lots of things like this. Specially tiny pieces of code on dwitter that generates awesome visuals. https://killedbyapixel.github.io/ZzFX/

jezzamon

I think a more maintained URL for this library is at https://sfxr.me/

Keyframe

Just what I need for this ongoing gamedev experiment. I was already looking at AI sound fx generators, as I did for music https://www.susmel.com/stacky/

claviska

Oh wow! I used this last year to generate the sound effects for https://rocketblaster.app/ and it gave it a great retro vibe.

andai

Non-minified vanilla JS. I salute you!

I learned programming twenty years ago by clicking View Source on random websites.

Time was when you could just read the code on the average website! That's quite rare now.

I used sfxr in some game jams last year, except I shipped the library with the game and had it generate sounds at runtime. (I don't think it's smaller/faster than the mp3s would have been, but it was very satisfying!)

I also used Software Automatic Mouth (originally for the C64) for TTS:

https://discordier.github.io/sam/

masswerk

Ah, yes, like a breeze of fresh air!

valenterry

Nice game!

tlhunter

I used the Flash predecessor to generate audio for my mobile game Cobalt Dungeon. It had pretty much the same controls and generated WAV files as well. Basically find something close to what you want then mutate it a whole bunch and then you're good to go.

aYsY4dDQ2NrcNzA

FutureSplash?

fenomas

They likely mean as3sfxr, a predecessor of TFA that was built in Flash.

socalgal2

I prefer one that saves that data as the parameters and provides a library to use them. I've used this one in the past

https://egonelbre.com/project/jsfx/

chaosprint

love the wav download option

I tried to create a tone in Glicol (https://glicol.org/) with some random idea there and it works quite well:

``` o: squ ~pitch >> mul ~amp_env >> mul 0.4;

~amp_env: ~trigger >> envperc 0.02 0.19;

~pitch: ~pitch_env >> mul 200 >> add 200;

~pitch_env: ~trigger >> envperc 0.01 0.15;

~trigger: speed 4.0 >> seq 60

```

deadbabe

Instead of exporting to a file is there a way to just make the sounds on the fly and then reuse them? For example in a JavaScript browser game?

fenomas

I got way into webaudio and made some libraries to that effect. For something close to TFA, try wafxr:

https://fenomas.github.io/wafxr/

It can export wav files, but its main purpose is to generate code snippets for playing the sound effect through webaudio, underneath using a much more general library. But people familiar with audio synthesis might prefer just using the underlying dependency directly - it basically turns arbitrary config into webaudio. This playground shows how it works:

https://fenomas.github.io/wasgen/

jezzamon

SFXR is this is the canonical tool for doing that, and yes, you can do that!

I'm not sure what this webpage is, jsxfr is the name of the JavaScript library on nodejs which is a different url to this page.

But yeah once you start generating things procedurally you can do things like generate 10 sounds with subtle variations to make things less repetitive.

fenomas

> I'm not sure what this webpage is, jsxfr is the name of the JavaScript library

Basically:

- The original sfxr was a win32 app, ca. 2007

- There was later a widely-used Flash port called as3sfxr, ca. 2010

- This page (TFA) is a JS port of sfxr, ca. 2011.

- `jsfxr` on npm was originally a separate JS port of as3sfxr, ca 2014

- Current `jsfxr` on npm appears to have changed hands in 2022, and is now a fork of TFA with somebody else's contributions (and a paid version, confusingly branded as "sfxr")

chickenzzzzu

Dont know about the library but any byte array in javascript can be converted to base64 and referenced via a data url

Jyaif

What I think is a superior alternative: https://jfxr.frozenfractal.com/

anonzzzies

The visualisation adds a lot for understanding what i'm doing with the knobs.