chr15m/jsfxr

JavaScript sound effects generator.

Quick 'n' easy game sound effects generator.

App 👉 https://sfxr.me

About | Use as a library | Jsfxr Pro

About

A port of sfxr to HTML5 by Eric Fredricksen. Maintained by Chris McCormick.

Library

You can use the jsxfr library to generate and play sounds in your JavaScript game code.

Node

Install it:

npm i jsfxr

Require it:

const sfxr = require("jsfxr").sfxr;

See API below for usage examples.

Browser

Include the scripts in your page:

<script src="https://sfxr.me/riffwave.js"></script>
<script src="https://sfxr.me/sfxr.js"></script>

You can then directly use the sfxr namespace without requiring it.

API

Generate a sound effect using a preset algorithm and play it using webaudio API.

const sfxr = require("jsfxr").sfxr;

const preset = "pickupCoin";
const sound = sfxr.generate(preset);

sfxr.play(sound);

Available presets are pickupCoin, laserShoot, explosion, powerUp, hitHurt, jump, blipSelect, synth, tone, click, and random.

You can also use the interface at https://sfxr.me to find the sound you want and then use the sound definition. Click the "serialize" button and copy the JSON code for the sound you want. You will get a datastructure that you can use like this:

var sound = {
  "oldParams": true,
  "wave_type": 1,
  "p_env_attack": 0,
  "p_env_sustain": 0.31718502829007483,
  "p_env_punch": 0,
  "p_env_decay": 0.2718540993592685,
  "p_base_freq": 0.2612<F2>6191208337196,
  "p_freq_limit": 0,
  "p_freq_ramp": 0.43787689856926615,
  "p_freq_dramp": 0,
  "p_vib_strength": 0,
  "p_vib_speed": 0,
  "p_arp_mod": 0,
  "p_arp_speed": 0,
  "p_duty": 1,
  "p_duty_ramp": 0,
  "p_repeat_speed": 0.7558565452384385,
  "p_pha_offset": 0,
  "p_pha_ramp": 0,
  "p_lpf_freq": 1,
  "p_lpf_ramp": 0,
  "p_lpf_resonance": 0,
  "p_hpf_freq": 0,
  "p_hpf_ramp": 0,
  "sound_vol": 0.25,
  "sample_rate": 44100,
  "sample_size": 8
};

var a = sfxr.toAudio(sound);
a.play();

You can also use the short URL compressed version of the sound:

var a = sfxr.toAudio("5EoyNVSymuxD8s7HP1ixqdaCn5uVGEgwQ3kJBR7bSoApFQzm7E4zZPW2EcXm3jmNdTtTPeDuvwjY8z4exqaXz3NGBHRKBx3igYfBBMRBxDALhBSvzkF6VE2Pv");
a.play();

You can also access an array of samples. By default the buffer contains audio rendered at a sample rate of 44100.

var buffer = sfxr.toBuffer(sound);
console.log(buffer);

Additionally you can get a dataURI for a wav file of the sound:

var a = sfxr.toWave(sound);
console.log(a.dataURI);

You can convert between the base58 short-url encoded format and JSON using b58encode and b58decode:

var b58string = sfxr.b58encode(sound);
var sound = sfxr.b58decode(b58string);

You can also access the lower level classes SoundEffect and Params if you need to. This can be useful for caching the internal representation for efficiency, or mutating the sound with params.mutate().

Jsfxr Pro

A Pro version of Jsfxr is available with enhanced features like the ability to save sounds to packs and download a zip file of all wavs.

Links

• Application: http://sfxr.me/
• Source code: https://github.com/chr15m/jsfxr/

Thanks

• Dr. Petter for inventing sfxr.
• Eric Fredricksen for creating this port.
• riffwave.js: http://www.codebase.es/riffwave/
• jquery-ui: http://jqueryui.com/

jsfxr's Issues

Don't reset sound level when generating sound

If I change the gain slider down to something like -20db because it's loud, I don't expect the volume to reset and be loud again when I randomize or select a new sound. It makes generating multiple sounds very difficult as the volume has to be modified on the operating system instead of using the built-in volume slider.

Obtaining .wav file doesn't work

Using the current https://sfxr.me , I am unable to save my audio to a .wav file. It seems an empty wave file is always generated (file size = 0kB, samples = 0).
This is related to a data verification issue in the RIFFWAVE class where it will reject the data array when it is not of type Array. At the moment, a Float32Array is passed instead of an array, causing the empty audio issue.

I'm working on a fix, will update here when it's ready.

Thank you for hosting this project online! It makes it really easy to use and share!

sfxr.me does not play sound in Safari but original fork does

@gingerbeardman reported:

I noticed your http://sfxr.me does not play sounds in Safari, but the original code does: http://github.grumdrig.com/jsfxr/

Make the play button more obvious

Feedback from a friend:

I really think the play button should be very prominent, and in a CTA position. It was the first thing I was scanning for just to see what sound would come out.

Error resolve 'riffwave' in node modules.

Hi, Chris,

I am trying to use your library in a typescript/react project originally and was getting this error:

ERROR in ./node_modules/jsfxr/sfxr.js 
Module not found: Error: Can't resolve 'riffwave' in '/home/colin/projects/sound-test/my-app/node_modules/jsfxr'
Did you mean './riffwave'?
Requests that should resolve in the current directory need to start with './'.

So, I originally thought I might have some compatibility issues with require/import syntax, but after much troubleshooting I couldn't figure it out. So, I spun up a very simple create-react-app to try to see if I could get jsfxr to work and somehow I am still getting the same error. I checked in the suggested file for the problem, but it looks like the require is happening correctly and the error is incorrect... RIFFWAVE = require("./riffwave.js"); is the only place I could find inside my-app/node_modules/jsfxr/sfxr.js
So, I can't figure out what the issue is. Any ideas?

Do I need to npm i riffwave as well? When I try that it fails to find it.

Middle section gets too wide and wiggles around sometimes

You've done some great things with this project, so thanks for improving it. My one quibble is that when the Frequency Delta Slide gets too wide (too close to zero) it moves that whole section around. For some reason the numbers in my version of the app don't get so small (and therefore large because of all the leading zeros.)

Maybe it would help to change the relevant function:

p_freq_dramp: function (v) {
    return (v*44100 / Math.pow(2, -44101./44100)).toPrecision(4) +
' 8va/sec^2?'; },

by multiplying it by 1000 and expressing the units as m8va/sec^2?

And/or boldly remove the question mark?

And/or changing sec^2 to sec<sup>2</sup>? But that might cause other layout difficulties.

Modernize the core to make it easier to use via npm, browser, etc.

Support for other output types

As well as serialising, it would be great if I could get it to output directly in a format I need to use.

I am working on a game for Playdate https://play.date and can provide a template for the synth functions it uses when the time comes.