Code Monkey home page Code Monkey logo

jsfx's Introduction

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.

jsfx's People

Contributors

dijkpah avatar egonelbre avatar greggman avatar hay avatar mtmckenna avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

jsfx's Issues

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.

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.

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

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...

Stop

I was wondering if there is a way to stop (interrupt) a sound.

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.

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.