ttencate / jfxr Goto Github PK

http://www.ludumdare.com/compo/2014/08/02/announcing-jfxr/comment-page-1/#comment-466029

"It’s a nice tool, but there are issues with the wav export. Lot of sound glitches in the final sound file. They even change with every export. It seems like they being stacked or something?

To test, open this in jfxr, then export to wav several times:
https://www.dropbox.com/s/xqpo7mvtruuyku2/Random%2029.jfxr?dl=1"

👍

I asked the developer of bfxr for this feature once, and he declined to add it to his project, but I still think it's a good idea. I’d like to be able to create additional “classes” of sound effect, beyond “Pickup/coin, Laser/shoot, Explosion, Powerup, Hit/hurt, Jump, Blip/select”.

I’d like to see a means by which people can develop their own categories for other types of sound, and extend *fxr by adding them and sharing them.

There’s so many categories that aren’t currently well represented by the existing ones: wind/surf, voices, vehicle/engine, alarm/siren, and so on.

Someone with advanced knowledge in audio engineering could design “sound profiles” for these by setting range constraints on the various sliders, and then save that as a new sound type.

Ideally, rather than adding these specific categories, if you made jfxr extendable in this way, anyone who uses it could create new sound types and then save them for later use, or even share them so that anyone using jfxr could use them.

Hi,
I built the web app and am now getting it embedded in gdevelop.
Basically I need to get the json data of the sound effect and the base64 string of the wav file.
Then I need to be able to load the json data when angular opens and it was saved back to gdevelop in the past.
That is how it works for jsfx.

Because jfxr is an angular app, I am now wondering how do I access its controller and all of its methods in electron/nodejs? Is there a simple way to access the dom?

Sorry I dont have any previous Angular experience

EDIT: Pull ready to merge in gdevelop now
4ian/GDevelop#716
Much thanks to both @4ian and @ttencate for the help/advice along the way

Biggest feature gap compared to bfxr.

I get this error:

E:\DEV\jfxr\app>npm run build

> [email protected] build E:\DEV\jfxr\app
> grunt

Running "jshint:files" (jshint) task
>> 17 files lint free.

Running "webpack" task
Hash: 0490a0246d856f881d76
Version: webpack 4.22.0
Time: 85ms
Built at: 2018-10-21 20:53:08

ERROR in Entry module not found: Error: Can't resolve './app/js/index.js' in 'E:\DEV\jfxr\app'
Warning:  Use --force to continue.

Aborted due to warnings.
npm ERR! code ELIFECYCLE
npm ERR! errno 3
npm ERR! [email protected] build: `grunt`
npm ERR! Exit status 3
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\blury\AppData\Roaming\npm-cache\_logs\2018-10-21T19_53_08_518Z-debug.log

People are asking whether the generated sounds are OK for commercial use. Yes, they are, but this should be documented somewhere.

E.g.. I got this to repro with attack = 0.08, sustain = 0.2 as well, but it doesn't seem to be deterministic.

Safari needs 'em for flexbox, for one.

Compression currently works on a single sample, essentially sample = Math.pow(sample, compression). It would be useful to have a compressor that amplifies quiet parts of the sound, based on the RMS of a short sliding window, or (easier) the RMS of all samples so far, exponentially weighted to favour recent ones. The current compressor would be a special case for falloff = 0.

The three offending lines:

• https://github.com/ttencate/jfxr/blob/master/src/player.js#L25
• https://github.com/ttencate/jfxr/blob/master/src/player.js#L41
• https://github.com/ttencate/jfxr/blob/master/src/player.js#L53

Turns out the first one currently requires the BufferSize (at least in WebKit) and the latter two also require at least the when argument to be present.

Setting the buffer to 1024 and passing 0 as the first parameter to this.source.start() and this.source.stop() made it work in both browsers.

For reference:

• https://developer.mozilla.org/en-US/docs/Web/API/AudioContext.createScriptProcessor (See the red warning box regarding Webkit)
• https://developer.mozilla.org/en-US/docs/Web/API/AudioBufferSourceNode (There's no Note on this, however without any arguments it still crashes)

From an email conversation:

From a synth-geek perspective, I might rename the term “Vibrato” to “Frequency Modulation” or “FM", because vibrato (usually a guitar or vocal modulation ‘effect’) never gets to the speeds that this particular modulator does, usually no faster than 2 - 10 Hz = pretty slow. If it did, we would have some VERY bizarre vocal/string/guitar pedal sounds!

The same goes for “Tremolo” - a quick rename to “Amplitude Modulation” or “AM” - again due to actual speeds being beyond human capability.

There should be a way to undo what you just did. Plus, of course, a Ctrl+Z / Cmd+Z shortcut key.

Our ears work logarithmically, and often we want more precision in the lower ranges.

Just generating the bytes, not the actual file writing/downloading.

Cf. #31. @blurymind @4ian

Wrapping Jfxr with something like electron would allow for easy distribution. This means that you could easily distribute Jfxr in sites like itch.io.

I've had a go myself, using nativefier, and all seems to be working. However I think it'd be best if the original author creates (and owns) the entry on itch.io.

A volume slider would be very nice, because the sounds are really loud when my computers at regular volume

i am pretty sure, this is an update problem, that i am unable to resolve:

• i am using npm: '8.11.0', node: '16.15.1'
• when running npm install, it fails with the following error:

npm ERR! code 1
npm ERR! path /Users/tp/Documents/GitHub/jfxr/app/node_modules/node-sass
npm ERR! command failed
npm ERR! command sh -c node scripts/build.js
npm ERR! Building: /usr/local/bin/node /Users/tp/Documents/GitHub/jfxr/app/node_modules/node-gyp/bin/node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=

• after updating the sass version, like so:

    "node-sass": "^7.0.1",
    "sass-loader": "^10.3.0",

npm install completes with 41 vulnerabilities

• however, npm run build then fails with:

ERROR in ./css/index.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.

even updating "mini-css-extract-plugin": "^1.6.2" does not resolve this issue.

i tried several versions now, updating all the modules, running npm audit fix at several stages, but was unable to get a build.
i hope i am not missing something obvious here...

"Save" opens the JSON in a new tab, where you can hit Cmd+S to save. "Export" opens a new tab which briefly displays some playback controls, but then switches to a noninteractive QuickTime logo. There seems to be no way to save the WAV from there.

This is an issue with Safari that, unfortunately, even the awesome FileSaver.js shim cannot do anything about: eligrey/FileSaver.js#12

We need to detect whether this is broken, and show the user a helpful warning.

Doesn't have to be extensive at first. Just to check that basic functionality is working.

http://www.reddit.com/r/gamedev/comments/2ci8mo/announcing_jfxr_a_tool_to_quickly_make_sound/cjfxv41

This should do some automatic crossfading of configurable duration, and of course looping playback.

The Grunt + Webpack approach doesn't allow for an efficient development workflow; we can only run the entire pipeline again if something changes. But I think we can drive everything from Webpack and get some extra goodies as a bonus (ES2015, SCSS).

• Replace grunt-contrib-jshint by eslint-loader
• Replace grunt-contrib-copy by file-loader
• Replace grunt-contrib-cssmin by sass-loader
• Replace grunt-contrib-imagemin by image-webpack-loader
• Add support for ES2015 using Babel, compile it to ES5 or even ES4 [pointless, because AudioContext requires a fairly modern browser anyway, and pretty much implies ES5 support]

Hi, I like this library very much, but the app I want to use it with uses React and not Angular. What if I dont want that dependency. Also I seem to be having trouble locating it on npm
https://www.npmjs.com/search?q=jfxr

Is it available as a nodejs module?

I'm not 100% sure as I only looked at the code, but I believe Tremolo is applied twice to the sound:

• once in the "Envelope" phase via the amplitudeAt function.
• once in the "Tremolo" phase.

Reported on http://www.reddit.com/r/gamedev/comments/2ci8mo/announcing_jfxr_a_tool_to_quickly_make_sound/cjg8g2y:

http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js is being assigned a //# sourceMappingURL, but already has one
http://jfxr.frozenfractal.com/jfxr.min.js is being assigned a //# sourceMappingURL, but already has one

Hello team, i work with python, i am not skilled for javascript, is it possible to have an API to GET / POST a json and download the resulting sound ?
JFXR is very nice

example:
https://jfxr.frozenfractal.com/#%7B%22_version%22%3A1%2C%22_name%22%3A%22Hit%2Fhurt%202%22%2C%22_locked%22%3A%5B%5D%2C%22sampleRate%22%3A44100%2C%22attack%22%3A0%2C%22sustain%22%3A0.05%2C%22sustainPunch%22%3A0%2C%22decay%22%3A0.07%2C%22tremoloDepth%22%3A0%2C%22tremoloFrequency%22%3A10%2C%22frequency%22%3A600%2C%22frequencySweep%22%3A-700%2C%22frequencyDeltaSweep%22%3A-800%2C%22repeatFrequency%22%3A0%2C%22frequencyJump1Onset%22%3A33%2C%22frequencyJump1Amount%22%3A0%2C%22frequencyJump2Onset%22%3A66%2C%22frequencyJump2Amount%22%3A0%2C%22harmonics%22%3A0%2C%22harmonicsFalloff%22%3A0.5%2C%22waveform%22%3A%22square%22%2C%22interpolateNoise%22%3Atrue%2C%22vibratoDepth%22%3A0%2C%22vibratoFrequency%22%3A10%2C%22squareDuty%22%3A50%2C%22squareDutySweep%22%3A0%2C%22flangerOffset%22%3A5%2C%22flangerOffsetSweep%22%3A2%2C%22bitCrush%22%3A16%2C%22bitCrushSweep%22%3A0%2C%22lowPassCutoff%22%3A22050%2C%22lowPassCutoffSweep%22%3A-4100%2C%22highPassCutoff%22%3A0%2C%22highPassCutoffSweep%22%3A0%2C%22compression%22%3A1%2C%22normalization%22%3Atrue%2C%22amplification%22%3A100%7D

To reproduce:

1. open https://jfxr.frozenfractal.com
2. create a link to the current sound and copy it
3. open the link in another tab

tested with: chrome, opera, electron

Without this, the sound list fills up really quickly, and deleting them all is tedious.

Probably needs Undo option first, in case you hit the preset button expecting it to create a new sound, but instead it overrides your carefully crafted current sound.

I like the visualization and tooltips of this app. However, it the performance is not very well. On my mac book pro (chrome), it takes 100% cpu time. After turn off the "auto" option, it still takes 20-30% when idle. Can you fix this? Or simply port it to desktop? Or a mobile app?

Probably needs a few sentences sometimes, too big for a tooltip. I'm thinking of adding a separate panel to the bottom that shows the info on hover.

I'm unsure how difficult this would be to implement as this project is entirely out of my domain, but it would be really convenient to additively stack multiple sounds on top of each other, and compress/amplify/normalize the result at the end.

I find myself pressing open multiple times to open a set of files I want to work on. Should support the multi-select open file selection dialog.

I have macOsX 10.15 and i can run the command yarn install, but when I run the command yarn build, I get the following error:

yarn run v1.22.19
warning ../../../package.json: No license field
$ webpack
Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:67:19)
    at Object.createHash (node:crypto:130:10)
    at module.exports (/Users/Hackcraft_/Downloads/jfxr-master/app/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/Users/Hackcraft_/Downloads/jfxr-master/app/node_modules/webpack/lib/NormalModule.js:417:16)
    at handleParseError (/Users/Hackcraft_/Downloads/jfxr-master/app/node_modules/webpack/lib/NormalModule.js:471:10)
    at /Users/Hackcraft_/Downloads/jfxr-master/app/node_modules/webpack/lib/NormalModule.js:503:5
    at /Users/Hackcraft_/Downloads/jfxr-master/app/node_modules/webpack/lib/NormalModule.js:358:12
    at /Users/Hackcraft_/Downloads/jfxr-master/app/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/Users/Hackcraft_/Downloads/jfxr-master/app/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at iterateNormalLoaders (/Users/Hackcraft_/Downloads/jfxr-master/app/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
    at /Users/Hackcraft_/Downloads/jfxr-master/app/node_modules/loader-runner/lib/LoaderRunner.js:236:3
    at runSyncOrAsync (/Users/Hackcraft_/Downloads/jfxr-master/app/node_modules/loader-runner/lib/LoaderRunner.js:130:11)
    at iterateNormalLoaders (/Users/Hackcraft_/Downloads/jfxr-master/app/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
    at Array.<anonymous> (/Users/Hackcraft_/Downloads/jfxr-master/app/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/Users/Hackcraft_/Downloads/jfxr-master/app/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at /Users/Hackcraft_/Downloads/jfxr-master/app/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
    at /Users/Hackcraft_/Downloads/jfxr-master/app/node_modules/graceful-fs/graceful-fs.js:123:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3)
/Users/Hackcraft_/Downloads/jfxr-master/app/node_modules/loader-runner/lib/LoaderRunner.js:133
		if(isError) throw e;
		            ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:67:19)
    at Object.createHash (node:crypto:130:10)
    at module.exports (/Users/Hackcraft_/Downloads/jfxr-master/app/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/Users/Hackcraft_/Downloads/jfxr-master/app/node_modules/webpack/lib/NormalModule.js:417:16)
    at handleParseError (/Users/Hackcraft_/Downloads/jfxr-master/app/node_modules/webpack/lib/NormalModule.js:471:10)
    at /Users/Hackcraft_/Downloads/jfxr-master/app/node_modules/webpack/lib/NormalModule.js:503:5
    at /Users/Hackcraft_/Downloads/jfxr-master/app/node_modules/webpack/lib/NormalModule.js:358:12
    at /Users/Hackcraft_/Downloads/jfxr-master/app/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/Users/Hackcraft_/Downloads/jfxr-master/app/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at iterateNormalLoaders (/Users/Hackcraft_/Downloads/jfxr-master/app/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
    at /Users/Hackcraft_/Downloads/jfxr-master/app/node_modules/loader-runner/lib/LoaderRunner.js:236:3
    at Object.context.callback (/Users/Hackcraft_/Downloads/jfxr-master/app/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at Object.module.exports (/Users/Hackcraft_/Downloads/jfxr-master/app/node_modules/eslint-loader/index.js:274:11)
    at LOADER_EXECUTION (/Users/Hackcraft_/Downloads/jfxr-master/app/node_modules/loader-runner/lib/LoaderRunner.js:119:14)
    at runSyncOrAsync (/Users/Hackcraft_/Downloads/jfxr-master/app/node_modules/loader-runner/lib/LoaderRunner.js:120:4)
    at iterateNormalLoaders (/Users/Hackcraft_/Downloads/jfxr-master/app/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
    at Array.<anonymous> (/Users/Hackcraft_/Downloads/jfxr-master/app/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/Users/Hackcraft_/Downloads/jfxr-master/app/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at /Users/Hackcraft_/Downloads/jfxr-master/app/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
    at /Users/Hackcraft_/Downloads/jfxr-master/app/node_modules/graceful-fs/graceful-fs.js:123:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3) {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v17.1.0
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Right now when you change a parameter, the sound plays as you drag the slider. This results in the sound being repeated over itself - not playing to the end until you release it.

I think it will be generally better to hear it from start to end when the mouse releases the slider instead of as you are dragging it.
That way the sound will play from start to end clearly and we wont have to click on the play button after that to hear it out properly

When the History list overflows, the default scrollbar looks out of place. It can be styled to be similar to other UI components, at least in WebKit: http://css-tricks.com/custom-scrollbars-in-webkit/

Instead of being implicitly 0, we should be able to configure it.

When clicking another, nothing happens.

this is so the app doesnt autoplay upon loading.
I am trying to stop it from playing a sound when loading , because when embeding it in gdevelop, I am making it load a sound that it previously stored in a gdevelop project- after it has loaded.

What ends up happening is that it loads, it plays the last edited sound from another resource, then loads the sound from my resource and plays it after.

I was wondering if there is a way of disabling this by appending autoplay=0 to the url of the app or something

For example, something like the "How to use it?" section here:
https://github.com/loov/jsfx

The tool is just plain broken on IE11

This should undo the last modification to the current sound.

Quoting my friend @thedjinn: "I would strongly suggest using band-limited waveforms as oscillators though, because that eliminates the audible aliasing. [...] One way to get band-limited waveforms is to create them with the Fourier series. If that's too slow (e.g. if you want real-time stuff) then precompute some wavetables and sample from these using Hermite interpolation. There are plenty of examples on MusicDSP."

What bfxr calls "Bit crush" is actually a downsampling and re-upsampling. Add it under this name (with sweep).

Apart from just sine waves. Could be really cool.

If I open a file (that is no longer in my downloads folder) I want to be able to save to the file location I opened. The way it is now works but I then have one extra step to move the newly downloaded file into the location I'm using it

From http://www.reddit.com/r/gamedev/comments/2ci8mo/announcing_jfxr_a_tool_to_quickly_make_sound/cjfxn8k:
http://jfxr.frozenfractal.com/#%7B%22_version%22:1,%22_name%22:%22Jump%20Sound%22,%22_locked%22:%5B%5D,%22sampleRate%22:44100,%22attack%22:0.03,%22sustain%22:0.2,%22sustainPunch%22:0,%22decay%22:0.12,%22tremoloDepth%22:0,%22tremoloFrequency%22:10,%22frequency%22:500,%22frequencySweep%22:50,%22frequencyDeltaSweep%22:0,%22repeatFrequency%22:0,%22frequencyJump1Onset%22:33,%22frequencyJump1Amount%22:0,%22frequencyJump2Onset%22:66,%22frequencyJump2Amount%22:0,%22harmonics%22:0,%22harmonicsFalloff%22:0.5,%22waveform%22:%22sine%22,%22interpolateNoise%22:true,%22vibratoDepth%22:0,%22vibratoFrequency%22:10,%22squareDuty%22:50,%22squareDutySweep%22:0,%22flangerOffset%22:0,%22flangerOffsetSweep%22:0,%22bitCrush%22:16,%22bitCrushSweep%22:0,%22lowPassCutoff%22:22050,%22lowPassCutoffSweep%22:0,%22highPassCutoff%22:0,%22highPassCutoffSweep%22:0,%22compression%22:1,%22normalization%22:true,%22amplification%22:100%7D does not work. We should probably percent-encode the generated URL to begin with, and accept percent-encoded URLs upon receiving.

Currently, the sound is synthesized all in one go. For long sounds, this leads to UI freeze and bad user experience.

There is already some code to do the work in chunks, and set a 0 millisecond timer to start the next chunk. This worked, but I noticed that this slows down generation of short sounds significantly. Maybe we could use a dynamic chunk size, and run synchronously if that would give acceptable latency, asynchronously otherwise.

I also tried web workers, but there are some problems. You cannot interrupt a web worker unless it's going through its message loop, which means we need to run in chunks inside the web worker as well. Alternatively, we could kill the entire worker and start a new one, but a garbage collection bug on Chrome made the tab crash after some 50 workers had been created. We could also have a pool of workers, and just let old ones run to completion, wasting some CPU.