Javascript Sound Effect Generator

Overview

This is a JavaScript library for sound effect generation and is supported on most current browsers.

Generation speed is approximately 1s audio = 10ms processing. Of course that value can vary a lot, depending on the settings or browser that you use.

How to use it?

Open index.html - this helps to pick out your samples.

Try clicking the presets and tweaking all the options. Once you are satisified with your result click add button at top-right.

Enter a name for the sound e.g. "select", repeat that as many times as you like. Tip: You can save your settings by making a bookmark of the page.

At the bottom of the page there is a Library section. There you can relisten or remove sounds that you do not like.

Once you are satisfied with your selection copy the JSON description (it's inside the input box).

It will look something like:

{"select":{"Volume":{"Sustain":0.1,"Decay":0.15,"Punch":0.55}}}

To use that library, you need to include jsfx.js in your code and use jsfx.Sounds(libarry) to initialize it. For example:

<script src="jsfx.js"></script>
<script>
var library = {
	"select": {"Volume":{"Sustain":0.1,"Decay":0.15,"Punch":0.55}},
	"long": {"Volume":{"Sustain":0.1,"Decay":0.5,"Punch":1}}
};
var sfx = jsfx.Sounds(library);
</script>
<button onclick="sfx.select()">Select</button>
<button onclick="sfx.long()">Long</button>

Note that it will load with a delay to avoid blocking the page load for too long, so calling those function immediately may result in silence.

Using with AudioContext (experimental)

You can use AudioContext to procedurally generate the sounds, for example:

<script src="jsfx.js"></script>
<script>
var library = {
	"static": {"Volume":{"Sustain":0.1,"Decay":0.15,"Punch":0.55}},
	"dynamic": function(){
		return {"Frequency": { "Start": Math.random()*440 + 220 }};
	},
	"coin": jsfx.Preset.Coin
};
var sfx = jsfx.Live(library);
</script>
<button onclick="sfx.static()">Static</button>
<button onclick="sfx.dynamic()">Dynamic</button>
<button onclick="sfx.coin()">Coin</button>

Few notes...

It's recommended to copy the jsfx.js to your own project instead of automatically downloading the latest version. Since every slight adjustment to the audio generation code can affect the resulting audio significantly.

The stable API is what is described in the README, everything else is subject to change.

Thanks to

This project was inspired by sfxr and was used as a reference for some algorithms and modes.

Comments
  • Which files need to be hosted?

    Which files need to be hosted?

    Hi, @loov. We are cdnjs team, and we want to host this project in cdnjs. Now I just know jsfx.js should be added in cdnjs. I'm curious that lib/audio.js and lib/jsfxlib.js mentioned in README.md at v1.0 should be added in cdnjs or not? If there is any other files need to be added please tell me, cdnjs/cdnjs#11213

    opened by yahsieh 10
  • add ability to access raw wave file

    add ability to access raw wave file

    Hello! I'd like to be able to get the raw wave data from jsfx so I can pass it through it an audio context to play later. Something like this:

    var context = new AudioContext();
    var source = context.createBufferSource();
    var buffer = null;
    var wave = jsfx.Wave(params);
    
    context.decodeAudioData(wave, function(decodedBuffer) {
      buffer = decodedBuffer;
    });
    
    source.buffer = buffer;
    source.connect(context.destination);
    source.start(0);
    }
    

    You already had the ability to return a Uint8Array, so in this commit, I exposed that function. I also moved some common logic into its own function. Do you think exposing this method makes sense?

    Thank you!

    McKenna

    opened by mtmckenna 8
  • jsfx.js can be used as both an IIFE and a node module

    jsfx.js can be used as both an IIFE and a node module

    Hello! I'm pretty jazzed on jsfx and looking to use it in an app that uses NPM modules to handle dependencies, and so it would be convenient if jsfx could be packaged as an NPM module as well.

    In this pull request, I updated jsfx.js to be able to be executed as either an IIFE (as it is currently) or as an NPM module. I based my changes on this post from NPM and this blog post. The update should not break any compatibility with previous versions of jsfx.

    If these changes work for you and you're interested, it'd be extra handy if you wouldn't mind publishing jsfx to NPM.

    In case it's useful, I also created a demo app that is your index.html using the Node module version of jsfx.

    Please let me know if you have any questions or thoughts!

    Thank you!

    McKenna

    opened by mtmckenna 8
  • Sound signal appears to be cut-off

    Sound signal appears to be cut-off

    I generated the signal, looked at it in sweep, and it appears that sound shapes are cut-off, as if they were artificially limited.

    Natural sound shapes usually look round and smooth, including at the top and at the bottom. But your shape is very different.

    I grabbed the sound redirecting chrome sound output into the null sink and saving the output.

    opened by yurivict 7
  • How to get the raw data (WAV format) as a string to create a base64 dataURI?

    How to get the raw data (WAV format) as a string to create a base64 dataURI?

    Hello,

    Thank you very much for this project. It is very interesting.

    I would like to use it for an open-source and free project I am developing (a game engine framework in JavaScript) but I do not see any method that can return the raw data of the sound generated in base64 (WAV format).

    Other libraries (which use or are based on riffwave.js) as https://github.com/mneubrand/jsfxr or https://github.com/grumdrig/jsfxr can return or can be modified easily to return the dataURI because it is a method that is already contaiend in riffwave.js. But those libraries are not longer being updated and seem quite old.

    Please, would it be possible to add a method in your library to return the dataURI as a string for the WAV generated? Indeed I would like it to return just the data (without "data:audio/wav;base64,").

    I would like to use that string to generate an Audio element (and possibly falling back to a Flash plugin that can support base64 audio for old browser or browsers that do not support WAV format as IE). I could even convert that WAV into MP3 format with JavaScript on the fly (although that could take a long time depending on the case).

    Thank you very much for your patience. Sorry about my English.

    opened by jalbam 6
  • small noise on generated sounds

    small noise on generated sounds

    Hi,

    Most of generated sounds have a little noise in background (like a radio noise). Do you know how to remove it ? I've tried a low pass filter and high pass filter but it's still present. Is it fixable with a property of the library or is it a real bug ?

    Thanks for this awesome library. gre

    opened by gre 6
  • Add support for Web Audio API

    Add support for Web Audio API

    I'm not sure you want this or not given that it's pretty simple.

    I did test it though by editing jsfxgui with the following patch

    diff --git a/lib/jsfxgui.js b/lib/jsfxgui.js
    index d32d798..966b081 100644
    --- a/lib/jsfxgui.js
    +++ b/lib/jsfxgui.js
    @@ -3,6 +3,9 @@ var jsfxgui = {};
         var Parameters = [];
         var logDiv = undefined;
    
    +    var webAudioAPI = window.AudioContext || window.webkitAudioContext || window.mozAudioContext;
    +    var ctx = new webAudioAPI();
    +
         function log(txt){
             if(logDiv === undefined){
                 return;
    @@ -384,18 +387,24 @@ var jsfxgui = {};
             var data = jsfx.generate(params);
             if(typeof(wave) !== undefined)
                 delete wave;
    -        var wave = audio.make(data);
    +//        var wave = audio.make(data);
    +        var buffer = audio.makeAudioBuffer(ctx, data)
    +        var src = ctx.createBufferSource();
    +        src.buffer = buffer;
    +        src.connect(ctx.destination);
    +        src.start();
    +
             delete data;        
    
             var stop = millis();
             log("generate: " + (stop - start) + "ms");          
    -        wave.play();
    +//        wave.play();
    
             if(typeof(this.onplay) !== undefined){
                 this.onplay();
             }
    -        
    -        return wave;
    +  console.log("pla");
    +//        return wave;
         };
    
         this.reset = function () {
    
    opened by greggman 3
  • Mobile safari

    Mobile safari

    This is really pretty awesome...I had no idea javascript could be use to emit sounds to begin with!

    I couldn't get any sound out of it on mobile safari though (running on the iPhone) - any idea why and if that's something that could be addressed? (Yes...I check that the volume was turned up all the way)

    Either way - thanks a lot for sharing, it's very impressive.

    opened by tifroz 3
  • Callbacks / Custom events on audio ready?

    Callbacks / Custom events on audio ready?

    I'm wondering, when generating a lot of sounds (25 or so) it can take up a few seconds before everything is loaded. Not quite sure why. However, would it be possible somehow to get pass a callback parameter on creation that is called when the sound is ready so you can display a loading animation? I've looked in the source code but can't quite figure out how to do that...

    opened by hay 2
  • request: NPM package?

    request: NPM package?

    Can you make this library available as an npm package please? It will make it easier to use in other projects https://www.npmjs.com/ https://docs.npmjs.com/getting-started/creating-node-modules

    opened by blurymind 1
  • can use webkitAudioContext (for Safari)

    can use webkitAudioContext (for Safari)

    Hello!

    For desktop and mobile Safari, it looks like we still need to use webKitAudioContext instead of AudioContext. I added a line to prefer AudioContext but fall back to webkitAudioContext if need be.

    Does this look all right to you? Thank you!

    opened by mtmckenna 0
  • jsmusic

    jsmusic

    Allow playing of notes - this would require sustain in ASD to be determined by some other factor.

    Generate music based on scales: https://gist.github.com/egonelbre/7531a7f41fd0a935b115

    opened by egonelbre 0
Owner
Loov
Loov
A subtle tilt effect for images. The idea is to move and rotate semi-transparent copies with the same background image in order to create a subtle motion or depth effect.

Image Tilt Effect A subtle tilt effect for images. The idea is to move and rotate semi-transparent copies with the same background image in order to c

Codrops 571 Nov 21, 2022
Cool 2D dissolve effect generator

Dissolve Cool 2D dissolve effect generator (demo) This module exposes a generator for generating pseudorandom points over a 2D integer grid. The gener

Travis Fischer 13 Apr 15, 2021
Javascript library enabling magnifying glass effect on an images

Magnifier.js Javascript library enabling magnifying glass effect on an images. Demo and documentation Features: Zoom in / out functionality using mous

Mark Rolich 808 Dec 18, 2022
A simple yet powerful native javascript plugin for a cool typewriter effect.

TypewriterJS v2 NPM Repository JSFiddle Example Emoji Example CDN You can use the CDN version of this plugin for fast and easy setup. <script src="htt

Tameem Safi 1.8k Jan 4, 2023
"shuffle-text" is JavaScript text effect library such as cool legacy of Flash.

ShuffleText This is the JavaScript library for text effect such as Flash contents. Setup Script Install <script src="shuffle-text.js"></script> NPM In

Yasunobu Ikeda 96 Dec 24, 2022
:keyboard: Simulate a typewriter effect in vanilla JavaScript.

malarkey Simulate a typewriter effect in vanilla JavaScript. Flexible API allowing granular control Option to repeat the sequence indefinitely Allows

Yuan Qing Lim 237 Nov 18, 2022
Enterprise-grade JavaScript snow effect for the internets, setting CPUs on fire worldwide every winter since 2003.

/** * DHTML Snowstorm! JavaScript-based Snow for web pages * -------------------------------------------------------- * Version 1.44.20131208 (Prev

Scott Schiller 518 Dec 24, 2022
Small but good javascript smoke effect 🌬💨

Demo You can play with a live demo here → Installation Basic Copy the smoke.js file into your project and use it with a script tag: <script src="smoke

Guillermo Webster 239 Dec 28, 2022
Javascript and SVG odometer effect library with motion blur

SVG library for transitioning numbers with motion blur JavaScript odometer or slot machine effect library for smoothly transitioning numbers with moti

Mike Skowronek 793 Dec 27, 2022
Cool and powerful effect to select fields. Javascript vanilla and ~2kb gzipped

pickout Cool and powerful effect to select fields. Javascript vanilla and ~2kb gzipped. DEMO PAGE For syntax of the previous version click here How to

Alan Ktquez 89 Sep 20, 2022
🎨 Aquarelle is a watercolor effect component. Javascript library by @Ramotion

Aquarelle About This project is maintained by Ramotion, Inc. We specialize in the designing and coding of custom UI for Mobile Apps and Websites. Look

Ramotion 1.8k Dec 9, 2022
Add a water ripple effect to your background using WebGL.

jQuery Ripples Plugin By the powers of WebGL, add a layer of water to your HTML elements which will ripple by cursor interaction! Important: this plug

Pim Schreurs 976 Dec 30, 2022
A decorative website background effect where SVG shapes morph and transform on scroll.

Morphing Background Shapes A decorative website background effect where SVG shapes morph and transform on scroll. Article on Codrops Demo This demo is

Codrops 351 Dec 26, 2022
Background image segment effect as seen on [Filippo Bello's Portfolio](http://www.filippobello.com/portfolio).

Segment Effect Background image segment effect as seen on Filippo Bello's Portfolio. Article on Codrops Demo License Integrate or build upon it for fr

Codrops 526 Nov 29, 2022
Switch the background-image with using effect.

jQuery.BgSwitcher Switch the background image with using effect. Demo http://rewish.github.io/jquery-bgswitcher/ Usage <div class="box"> <p>Lorem ip

rewish 195 Dec 30, 2022
Recreation of the background scale hover effect seen on the DDD Hotel website using CSS clip paths.

Background Scale Hover Effect Recreation of the background scale hover effect seen on the DDD Hotel menu using CSS clip paths. Article on Codrops Demo

Codrops 98 Dec 6, 2022
A motion hover effect for a background grid of images.

Image Grid Motion Effect A motion hover effect for a background grid of images. Article on Codrops Demo Installation Install dependencies: npm install

Codrops 118 Dec 31, 2022
fixed-background-effect

Fixed Background Effect A simple template that takes advantage of the background-attachment CSS property to create a fixed background effect. Article

CodyHouse 50 Oct 28, 2022
Warp drive is a lightweight jQuery plugin that helps you create a cool, interactive, configurable, HTML5 canvas based warp drive/starfield effect.

Warp drive jQuery plugin (jquery-warpdrive-plugin) Preview Description Warp drive is a lightweight jQuery plugin that helps you create a cool, interac

Niklas 51 Nov 15, 2022