├── CNAME
├── .gitignore
├── .hgignore
├── icon.png
├── screenshot.png
├── jsfxr-pro-screenshot.png
├── playwright.config.js
├── package.json
├── UNLICENSE
├── tests.js
├── sfxr-to-wav
├── README.md
├── logo.svg
├── riffwave.js
├── e2e-tests.js
├── index.html
└── sfxr.js


/CNAME:
--------------------------------------------------------------------------------
1 | sfxr.me
2 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .*.swp
2 | workspace
3 | node_modules
4 | 


--------------------------------------------------------------------------------
/.hgignore:
--------------------------------------------------------------------------------
1 | syntax: glob
2 | jquery-ui
3 | .DS_Store
4 | test.wav
5 | 


--------------------------------------------------------------------------------
/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chr15m/jsfxr/HEAD/icon.png


--------------------------------------------------------------------------------
/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chr15m/jsfxr/HEAD/screenshot.png


--------------------------------------------------------------------------------
/jsfxr-pro-screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chr15m/jsfxr/HEAD/jsfxr-pro-screenshot.png


--------------------------------------------------------------------------------
/playwright.config.js:
--------------------------------------------------------------------------------
 1 | const { defineConfig } = require('@playwright/test');
 2 | 
 3 | module.exports = defineConfig({
 4 |   testDir: '.',
 5 |   testMatch: 'e2e-tests.js',
 6 |   timeout: 30000,
 7 |   retries: 0,
 8 |   use: {
 9 |     baseURL: 'http://localhost:8000',
10 |     headless: true,
11 |     viewport: { width: 1280, height: 720 },
12 |   },
13 |   webServer: {
14 |     command: 'npx live-server --port=8000 --no-browser',
15 |     port: 8000,
16 |     reuseExistingServer: true,
17 |   },
18 |   projects: [
19 |     {
20 |       name: 'chromium',
21 |       use: { browserName: 'chromium' },
22 |     },
23 |   ],
24 | });
25 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "jsfxr",
 3 |   "version": "1.3.0",
 4 |   "description": "8-bit sound effects generator based on sfxr",
 5 |   "main": "sfxr.js",
 6 |   "exports": [
 7 |     "./sfxr.js",
 8 |     "./riffwave.js"
 9 |   ],
10 |   "homepage": "https://github.com/chr15m/jsfxr",
11 |   "repository": {
12 |     "type": "git",
13 |     "url": "https://github.com/chr15m/jsfxr.git",
14 |     "web": "https://github.com/chr15m/jsfxr"
15 |   },
16 |   "bugs": {
17 |     "url": "https://github.com/chr15m/jsfxr/issues/"
18 |   },
19 |   "keywords": [
20 |     "sfxr",
21 |     "jsfxr",
22 |     "8-bit",
23 |     "sfx",
24 |     "sound effects",
25 |     "synth",
26 |     "8bit",
27 |     "retro",
28 |     "chiptune",
29 |     "audio",
30 |     "music",
31 |     "sound",
32 |     "game development"
33 |   ],
34 |   "devDependencies": {
35 |     "@playwright/test": "^1.57.0",
36 |     "live-server": "1.2.1",
37 |     "tape": "5.6.1"
38 |   },
39 |   "scripts": {
40 |     "serve": "live-server",
41 |     "test": "./tests.js",
42 |     "test:e2e": "playwright test"
43 |   },
44 |   "files": [
45 |     "sfxr.js",
46 |     "riffwave.js",
47 |     "UNLICENSE",
48 |     "README.md",
49 |     "sfxr-to-wav"
50 |   ],
51 |   "bin": {
52 |     "sfxr-to-wav": "./sfxr-to-wav"
53 |   }
54 | }
55 | 


--------------------------------------------------------------------------------
/UNLICENSE:
--------------------------------------------------------------------------------
 1 | This is free and unencumbered software released into the public
 2 | domain.
 3 | 
 4 | Anyone is free to copy, modify, publish, use, compile, sell, or
 5 | distribute this software, either in source code form or as a compiled
 6 | binary, for any purpose, commercial or non-commercial, and by any
 7 | means.
 8 | 
 9 | In jurisdictions that recognize copyright laws, the author or authors
10 | of this software dedicate any and all copyright interest in the
11 | software to the public domain. We make this dedication for the benefit
12 | of the public at large and to the detriment of our heirs and
13 | successors. We intend this dedication to be an overt act of
14 | relinquishment in perpetuity of all present and future rights to this
15 | software under copyright law.
16 | 
17 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
18 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
19 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
20 | IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
21 | OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
22 | ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
23 | OTHER DEALINGS IN THE SOFTWARE.
24 | 
25 | For more information, please refer to <http://unlicense.org/>
26 | 


--------------------------------------------------------------------------------
/tests.js:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env node
 2 | 
 3 | var test = require("tape");
 4 | var j = require("./sfxr");
 5 | 
 6 | test('test converting values from sliders to domain and back again', async function (t) {
 7 |   const keys = Object.keys(j.convert.sliders);
 8 |   for (k in j.convert.sliders) {
 9 |   //for (k in {"p_lpf_freq": true}) {
10 |     let tolerance = 0.0001;
11 |     // if (["p_arp_speed", "p_repeat_speed"].indexOf(k) != -1) continue;
12 |     // special case these because the rounding in the slider conversion destroys information
13 |     if (["p_arp_speed", "p_repeat_speed"].indexOf(k) != -1) tolerance = 0.004;
14 |     const start = j.parameters.signed.indexOf(k) == -1 ? 0 : -1;
15 |     const table = [];
16 |     for (i=start; i<=1; i+=0.01) {
17 |       const r1 = j.convert.sliders[k](i);
18 |       const r2 = j.convert.domain[k](r1);
19 |       const r3 = j.convert.domain_inverse[k](r2);
20 |       const r4 = j.convert.sliders_inverse[k](r3);
21 |       table[i] = {"slider": r1, "slider_inv": j.convert.sliders_inverse[k](r1), "domain": r2, "domain_inv": r3, "round_trip": r4};
22 |       //console.log(i, r1, j.convert.sliders_inverse[k](r1), r2, r3, r4);
23 |       var pass = Math.abs(i - r4) < tolerance;
24 |       if (!pass) {
25 |         console.table(table);
26 |       }
27 |       t.ok(pass, k + " at " + i + " =~ " + r4);
28 |       if (!pass) {
29 |         process.exit();
30 |       }
31 |     }
32 |     console.table(table);
33 |   }
34 | });
35 | 


--------------------------------------------------------------------------------
/sfxr-to-wav:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env node
 2 | 
 3 | sfxr = require('./sfxr.js');
 4 | var fs = require('fs');
 5 | 
 6 | // defaults
 7 | var outfile = "sfxr-sound.wav";
 8 | 
 9 | // set up initial sound parameters object
10 | var parameters = new sfxr.Params();
11 | parameters.sound_vol = 0.25;
12 | parameters.sample_rate = 44100;
13 | parameters.sample_size = 8;
14 | 
15 | // parse arguments
16 | for (a=2; a<process.argv.length; a++) {
17 |   if (process.argv[a] == "-h" || process.argv[a] == "--help") {
18 |     console.log("Usage: ./sfxr-to-wav SYNTH-DEFINITION [FILENAME.wav]");
19 |     console.log("SYNTH-DEFINITION is the encoded synth as found in the share URL at sfxr.me");
20 |     console.log("You can also pipe the JSON Serialized version of the synth into the script like `cat my-sound.sfxr.json | ./sfxr-to-wav my-sound.wav`");
21 |     process.exit();
22 |   } else if (process.argv[a].indexOf(".wav") != -1) {
23 |     outfile = process.argv[a];
24 |   } else {
25 |     // grab the b58 synth definition from the command line
26 |     parameters.fromB58(process.argv[a]);
27 |     parameters.set = true;
28 |     if (outfile == "sfxr-sound.wav") {
29 |       outfile = process.argv[a] + ".wav";
30 |     }
31 |   }
32 | }
33 | 
34 | if (!parameters.set) {
35 |   // we're getting json from stdin
36 |   parameters.fromJSON(
37 |     JSON.parse(
38 |       fs.readFileSync('/dev/stdin').toString()));
39 | }
40 | 
41 | // get jsfxr to generate the sound
42 | var sound = new sfxr.SoundEffect(parameters).generate();
43 | 
44 | // write the wav out to a file
45 | var regex = /^data:.+\/(.+);base64,(.*)$/;
46 | var matches = sound.dataURI.match(regex);
47 | var ext = matches[1];
48 | var data = matches[2];
49 | var buffer = new Buffer(data, 'base64');
50 | fs.writeFileSync(outfile, buffer);
51 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | Quick 'n' easy game sound effects generator.
  2 | 
  3 | App 👉 https://sfxr.me
  4 | 
  5 | [About](#about) | [Use as a library](#library) | [Jsfxr Pro](#jsfxr-pro)
  6 | 
  7 | # About
  8 | 
  9 | A port of [sfxr](http://www.drpetter.se/project_sfxr.html) to HTML5 by Eric Fredricksen.
 10 | Maintained by Chris McCormick.
 11 | 
 12 | ![jsfxr screenshot](screenshot.png)
 13 | 
 14 | # Library
 15 | 
 16 | You can use the jsxfr library to generate and play sounds in your JavaScript game code.
 17 | 
 18 | ## Node
 19 | 
 20 | Install it:
 21 | 
 22 | ```
 23 | npm i jsfxr
 24 | ```
 25 | 
 26 | Require it:
 27 | 
 28 | ```
 29 | const sfxr = require("jsfxr").sfxr;
 30 | ```
 31 | 
 32 | See [API](#API) below for usage examples.
 33 | 
 34 | ## Browser
 35 | 
 36 | Include the scripts in your page:
 37 | 
 38 | ```
 39 | <script src="https://sfxr.me/riffwave.js"></script>
 40 | <script src="https://sfxr.me/sfxr.js"></script>
 41 | ```
 42 | 
 43 | You can then directly use the `sfxr` namespace without requiring it.
 44 | 
 45 | ## API
 46 | 
 47 | Generate a sound effect using a preset algorithm and play it using webaudio API.
 48 | 
 49 | ```javascript
 50 | const sfxr = require("jsfxr").sfxr;
 51 | 
 52 | const preset = "pickupCoin";
 53 | const sound = sfxr.generate(preset);
 54 | 
 55 | sfxr.play(sound);
 56 | ```
 57 | 
 58 | Available presets are `pickupCoin`, `laserShoot`, `explosion`, `powerUp`, `hitHurt`, `jump`, `blipSelect`, `synth`, `tone`, `click`, and `random`.
 59 | 
 60 | You can also use the interface at https://sfxr.me to find the sound you want and then use the sound definition.
 61 | Click the "serialize" button and copy the JSON code for the sound you want.
 62 | You will get a datastructure that you can use like this:
 63 | 
 64 | ```javascript
 65 | var sound = {
 66 |   "oldParams": true,
 67 |   "wave_type": 1,
 68 |   "p_env_attack": 0,
 69 |   "p_env_sustain": 0.31718502829007483,
 70 |   "p_env_punch": 0,
 71 |   "p_env_decay": 0.2718540993592685,
 72 |   "p_base_freq": 0.2612<F2>6191208337196,
 73 |   "p_freq_limit": 0,
 74 |   "p_freq_ramp": 0.43787689856926615,
 75 |   "p_freq_dramp": 0,
 76 |   "p_vib_strength": 0,
 77 |   "p_vib_speed": 0,
 78 |   "p_arp_mod": 0,
 79 |   "p_arp_speed": 0,
 80 |   "p_duty": 1,
 81 |   "p_duty_ramp": 0,
 82 |   "p_repeat_speed": 0.7558565452384385,
 83 |   "p_pha_offset": 0,
 84 |   "p_pha_ramp": 0,
 85 |   "p_lpf_freq": 1,
 86 |   "p_lpf_ramp": 0,
 87 |   "p_lpf_resonance": 0,
 88 |   "p_hpf_freq": 0,
 89 |   "p_hpf_ramp": 0,
 90 |   "sound_vol": 0.25,
 91 |   "sample_rate": 44100,
 92 |   "sample_size": 8
 93 | };
 94 | 
 95 | var a = sfxr.toAudio(sound);
 96 | a.play();
 97 | ```
 98 | 
 99 | You can also use the short URL compressed version of the sound:
100 | 
101 | ```javascript
102 | var a = sfxr.toAudio("5EoyNVSymuxD8s7HP1ixqdaCn5uVGEgwQ3kJBR7bSoApFQzm7E4zZPW2EcXm3jmNdTtTPeDuvwjY8z4exqaXz3NGBHRKBx3igYfBBMRBxDALhBSvzkF6VE2Pv");
103 | a.play();
104 | ```
105 | 
106 | You can also access an array of samples.
107 | By default the buffer contains audio rendered at a sample rate of `44100`.
108 | 
109 | ```
110 | var buffer = sfxr.toBuffer(sound);
111 | console.log(buffer);
112 | ```
113 | 
114 | Additionally you can get a dataURI for a wav file of the sound:
115 | 
116 | ```
117 | var a = sfxr.toWave(sound);
118 | console.log(a.dataURI);
119 | ```
120 | 
121 | You can convert between the base58 short-url encoded format and JSON using `b58encode` and `b58decode`:
122 | 
123 | ```
124 | var b58string = sfxr.b58encode(sound);
125 | var sound = sfxr.b58decode(b58string);
126 | ```
127 | 
128 | You can also access the lower level classes `SoundEffect` and `Params` if you need to.
129 | This can be useful for caching the internal representation for efficiency, or mutating the sound with `params.mutate()`.
130 | 
131 | # Jsfxr Pro
132 | 
133 | A [Pro version of Jsfxr](https://pro.sfxr.me/) is available with enhanced features like the ability to save sounds to packs and download a zip file of all wavs.
134 | 
135 | [![Jsfxr Pro Screenshot](./jsfxr-pro-screenshot.png)](https://pro.sfxr.me)
136 | 
137 | # Links
138 | 
139 | * Application:  http://sfxr.me/
140 | * Source code:  https://github.com/chr15m/jsfxr/
141 | 
142 | # Thanks
143 | 
144 | * Dr. Petter for inventing sfxr.
145 | * Eric Fredricksen for creating this port.
146 | * riffwave.js: http://www.codebase.es/riffwave/
147 | * jquery-ui:   http://jqueryui.com/
148 | 


--------------------------------------------------------------------------------
/logo.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <svg width="172.93mm" height="82.801mm" version="1.1" viewBox="0 0 612.76 293.39" xmlns="http://www.w3.org/2000/svg">
 3 |  <defs>
 4 |   <linearGradient id="linearGradient4842" x1="289.37" x2="285.06" y1="19.143" y2="224.45" gradientUnits="userSpaceOnUse">
 5 |    <stop stop-color="#f58400" offset="0"/>
 6 |    <stop stop-color="#f5a700" offset="1"/>
 7 |   </linearGradient>
 8 |  </defs>
 9 |  <path d="m304.59 1.0384c-10.618-0.0044-19.495 0.94444-27.673 4.5521-6.7052 2.9211-12.766 7.2271-17.258 12.981a15.002 15.002 0 0 0-0.0238 0.03479c-4.5049 5.8041-7.1222 12.709-8.4359 20.01-0.48619 2.7024-0.82989 5.3214-1.1152 7.9122h-1.7377a15.002 15.002 0 0 0-15.006 14.995l-2e-3 4.0797c-1.4059-1.6103-2.895-3.1306-4.477-4.5521-6.3835-5.8033-14.254-9.8348-22.79-12.052-7.0759-1.8563-14.854-2.3579-24.354-2.2559a15.002 15.002 0 0 0-0.011-0.0019c-3.177 0.03427-6.5299 0.1503-10.071 0.34425-13.735 0.75222-25.237 2.7014-35.08 6.8044-9.5146 3.8942-17.813 9.9697-23.618 18.073h4e-3c-5.9774 8.344-8.7629 18.768-8.1978 29.085 0.10277 1.8765 0.42193 3.7279 0.75441 5.5739l-0.4889 0.0605-4.695-37.241a15.002 15.002 0 0 0-2.472-6.0609 15.002 15.002 0 0 0 0.82217-6.9893l-3.7136-29.473a15.002 15.002 0 0 0-16.76-13.004l-42.943 5.4127a15.002 15.002 0 0 0-13.006 16.758l3.7153 29.473a15.002 15.002 0 0 0 2.5709 6.3081 15.002 15.002 0 0 0-0.92471 6.7421l13.204 104.73c0.15205 1.2061 0.14672 2.1831 0.14283 3.1312-0.38146-0.0198-0.22302 8e-3 -0.64272-0.0238a15.002 15.002 0 0 0-16.094 13.792l-2.4921 31.964a15.002 15.002 0 0 0 8.0623 14.107l54.148 39.134a15.002 15.002 0 0 0 10.472 5.4604c10.521 0.7422 19.536 0.74501 27.479-0.23438 9.6127-1.1856 18.327-3.7613 25.474-9.7763 6.0534-5.0941 10.62-12.301 12.292-20.137 1.4913-6.7661 1.1268-13.897 0.23438-22.23 1.8407 1.5214 3.7238 2.9997 5.7954 4.2115a15.002 15.002 0 0 0 0.0476 0.0275c11.77 6.8264 25.697 7.8462 43.229 6.9069 12.635-0.6769 23.313-2.6075 32.541-7.0754a15.002 15.002 0 0 0 0.0531-0.0275c7.0644-3.4552 13.232-8.2698 17.776-14.411l-4e-3 2.3218a15.002 15.002 0 0 0 14.993 15.006l33.994 0.0146a15.002 15.002 0 0 0 9.9392-4.4422 15.002 15.002 0 0 0 8.4926 3.6421l36.677 2.1406a15.002 15.002 0 0 0 12.684-5.7277l6.385-8.1539 3.9424 7.7675a15.002 15.002 0 0 0 12.503 8.185l39.506 2.3054a15.002 15.002 0 0 0 5.0996-0.63723 15.002 15.002 0 0 0 5.1948 2.2834l33.67 5.1252a15.002 15.002 0 0 0 15.335-7.7675l46.732-49.764 47.021-79.04 15.002-23.707a15.002 15.002 0 0 0-3.759-20.085c-8.2595-6.1047-16.987-10.385-26.35-11.842-6.7539-1.0506-13.758-0.54961-20.219 1.6608a15.002 15.002 0 0 0-7.2163-3.3509l-39.942-6.2129a15.002 15.002 0 0 0-15.791 9.4888 15.002 15.002 0 0 0-13.861-13.279l-47.548-2.8345a15.002 15.002 0 0 0-12.885 5.9621l-7.9873 10.631-5.2278-10.573a15.002 15.002 0 0 0-12.554-8.326l-45.371-2.7045 4.5521-24.833a15.002 15.002 0 0 0-12.92-17.593c-14.741-1.8133-26.081-2.7765-34.818-2.7796z" fill="#1a1a1a"/>
10 |  <path d="m506.7 72.7 39.94 6.2131-2.8375 18.24q7.6083-10.949 14.373-14.406 6.8861-3.5455 15.901-2.1431 9.4346 1.4677 19.738 9.083l-17.938 28.346q-7.0584-4.319-11.461-5.0039-8.3863-1.3046-14.075 4.8966-8.1208 8.7217-12.279 35.453l-5.8054 37.319-42.875-6.6697zm-165.59-11.827 51.15 3.0511 16.027 32.414 22.626-30.109 47.55 2.8363-41.533 51.299 37.577 61.332-50.303-3.0006-18.596-37.456-26.624 34.759-46.702-2.7858 44.39-56.443zm-33.352 0.68142 20.581 9e-3 -0.0132 31.615-20.581-9e-3 -0.0339 81.052-43.284-0.0182 0.0339-81.052-16.126-7e-3 0.0132-31.615 16.126 7e-3 2e-3 -5.0923q3e-3 -6.8958 1.4916-15.17 1.4887-8.2744 5.5223-13.471 4.1397-5.3027 11.461-8.4824 7.4276-3.2857 21.644-3.2797 11.352 4e-3 32.993 2.666l-4.7849 26.096q-7.744-1.2763-12.518-1.2783-5.8349-2e-3 -8.3819 2.0122-2.5469 1.9085-3.6096 6.1517-0.53142 2.3338-0.53457 9.8661zm-190.13 87.66 42.575-6.3692q3.066 7.482 8.0127 10.505 4.9467 3.0228 12.892 2.5877 8.6863-0.47572 13.25-4.4444 3.5567-2.9572 3.3305-7.0885-0.25527-4.6609-5.2673-6.9364-3.5943-1.6094-18.782-3.4338-22.672-2.6895-31.644-5.4918-8.872-2.914-15.345-10.528-6.3672-7.6199-6.9242-17.789-0.60915-11.123 5.4117-19.527 6.0209-8.4046 17.141-12.945 11.114-4.6461 30.182-5.6904 20.127-1.1023 29.829 1.4476 9.8079 2.544 16.518 8.6577 6.8156 6.1079 11.656 16.893l-40.669 6.2648q-1.8848-5.3154-5.7316-7.6547-5.2703-3.1113-12.474-2.7168-7.3092 0.40031-10.554 3.2342-3.1446 2.7222-2.9416 6.4298 0.22626 4.1313 4.5795 6.0178 4.3533 1.8866 18.641 2.804 21.637 1.2587 32.362 5.0275t16.674 11.518q6.0552 7.7432 6.5832 17.383 0.53374 9.7456-4.8936 19.286-5.3214 9.535-17.731 15.74-12.31 6.0928-34.132 7.288-30.826 1.6882-44.443-6.3846-13.511-8.0786-18.106-24.083zm-80.498-115.01 42.945-5.4137 3.7153 29.472-42.945 5.4137zm5.3606 42.524 42.945-5.4137 13.667 108.41q2.614 20.735 0.64958 29.751-1.8591 9.0026-9.2872 15.392t-22.48 8.2872q-12.42 1.5657-31.305 0.2038l2.4931-31.965q5.2902 0.40239 7.7111 0.0973 5.4733-0.68998 7.8376-4.8375 2.3775-4.0422 0.97102-15.199l-13.202-104.73z" fill="url(#linearGradient4842)"/>
11 | </svg>
12 | 


--------------------------------------------------------------------------------
/riffwave.js:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * RIFFWAVE.js v0.03 - Audio encoder for HTML5 <audio> elements.
  3 |  * Copyleft 2011 by Pedro Ladaria <pedro.ladaria at Gmail dot com>
  4 |  *
  5 |  * Public Domain
  6 |  *
  7 |  * Changelog:
  8 |  *
  9 |  * 0.01 - First release
 10 |  * 0.02 - New faster base64 encoding
 11 |  * 0.03 - Support for 16bit samples
 12 |  *
 13 |  * Notes:
 14 |  *
 15 |  * 8 bit data is unsigned: 0..255
 16 |  * 16 bit data is signed: -32,768..32,767
 17 |  *
 18 |  */
 19 | 
 20 | var FastBase64 = {
 21 | 
 22 |   chars: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
 23 |   encLookup: [],
 24 | 
 25 |   Init: function() {
 26 |     for (var i=0; i<4096; i++) {
 27 |       this.encLookup[i] = this.chars[i >> 6] + this.chars[i & 0x3F];
 28 |     }
 29 |   },
 30 | 
 31 |   Encode: function(src) {
 32 |     var len = src.length;
 33 |     var dst = '';
 34 |     var i = 0;
 35 |     while (len > 2) {
 36 |       n = (src[i] << 16) | (src[i+1]<<8) | src[i+2];
 37 |       dst+= this.encLookup[n >> 12] + this.encLookup[n & 0xFFF];
 38 |       len-= 3;
 39 |       i+= 3;
 40 |     }
 41 |     if (len > 0) {
 42 |       var n1= (src[i] & 0xFC) >> 2;
 43 |       var n2= (src[i] & 0x03) << 4;
 44 |       if (len > 1) n2 |= (src[++i] & 0xF0) >> 4;
 45 |       dst+= this.chars[n1];
 46 |       dst+= this.chars[n2];
 47 |       if (len == 2) {
 48 |         var n3= (src[i++] & 0x0F) << 2;
 49 |         n3 |= (src[i] & 0xC0) >> 6;
 50 |         dst+= this.chars[n3];
 51 |       }
 52 |       if (len == 1) dst+= '=';
 53 |       dst+= '=';
 54 |     }
 55 |     return dst;
 56 |   } // end Encode
 57 | 
 58 | }
 59 | 
 60 | FastBase64.Init();
 61 | 
 62 | var RIFFWAVE = function(data) {
 63 | 
 64 |   this.data = [];        // Array containing audio samples
 65 |   this.wav = [];         // Array containing the generated wave file
 66 |   this.dataURI = '';     // http://en.wikipedia.org/wiki/Data_URI_scheme
 67 | 
 68 |   this.header = {                         // OFFS SIZE NOTES
 69 |     chunkId      : [0x52,0x49,0x46,0x46], // 0    4    "RIFF" = 0x52494646
 70 |     chunkSize    : 0,                     // 4    4    36+SubChunk2Size = 4+(8+SubChunk1Size)+(8+SubChunk2Size)
 71 |     format       : [0x57,0x41,0x56,0x45], // 8    4    "WAVE" = 0x57415645
 72 |     subChunk1Id  : [0x66,0x6d,0x74,0x20], // 12   4    "fmt " = 0x666d7420
 73 |     subChunk1Size: 16,                    // 16   4    16 for PCM
 74 |     audioFormat  : 1,                     // 20   2    PCM = 1
 75 |     numChannels  : 1,                     // 22   2    Mono = 1, Stereo = 2...
 76 |     sampleRate   : 8000,                  // 24   4    8000, 44100...
 77 |     byteRate     : 0,                     // 28   4    SampleRate*NumChannels*BitsPerSample/8
 78 |     blockAlign   : 0,                     // 32   2    NumChannels*BitsPerSample/8
 79 |     bitsPerSample: 8,                     // 34   2    8 bits = 8, 16 bits = 16
 80 |     subChunk2Id  : [0x64,0x61,0x74,0x61], // 36   4    "data" = 0x64617461
 81 |     subChunk2Size: 0                      // 40   4    data size = NumSamples*NumChannels*BitsPerSample/8
 82 |   };
 83 | 
 84 |   function u32ToArray(i) {
 85 |     return [i&0xFF, (i>>8)&0xFF, (i>>16)&0xFF, (i>>24)&0xFF];
 86 |   }
 87 | 
 88 |   function u16ToArray(i) {
 89 |     return [i&0xFF, (i>>8)&0xFF];
 90 |   }
 91 | 
 92 |   function split16bitArray(data) {
 93 |     var r = [];
 94 |     var j = 0;
 95 |     var len = data.length;
 96 |     for (var i=0; i<len; i++) {
 97 |       r[j++] = data[i] & 0xFF;
 98 |       r[j++] = (data[i]>>8) & 0xFF;
 99 |     }
100 |     return r;
101 |   }
102 | 
103 |   this.Make = function(data) {
104 |     if (data instanceof Array) this.data = data;
105 |     this.header.byteRate = (this.header.sampleRate * this.header.numChannels * this.header.bitsPerSample) >> 3;
106 |     this.header.blockAlign = (this.header.numChannels * this.header.bitsPerSample) >> 3;
107 |     this.header.subChunk2Size = this.data.length;
108 |     this.header.chunkSize = 36 + this.header.subChunk2Size;
109 | 
110 |     this.wav = this.header.chunkId.concat(
111 |       u32ToArray(this.header.chunkSize),
112 |       this.header.format,
113 |       this.header.subChunk1Id,
114 |       u32ToArray(this.header.subChunk1Size),
115 |       u16ToArray(this.header.audioFormat),
116 |       u16ToArray(this.header.numChannels),
117 |       u32ToArray(this.header.sampleRate),
118 |       u32ToArray(this.header.byteRate),
119 |       u16ToArray(this.header.blockAlign),
120 |       u16ToArray(this.header.bitsPerSample),
121 |       this.header.subChunk2Id,
122 |       u32ToArray(this.header.subChunk2Size),
123 |       this.data
124 |     );
125 |     this.dataURI = 'data:audio/wav;base64,'+FastBase64.Encode(this.wav);
126 |   };
127 | 
128 |   if (data instanceof Array) this.Make(data);
129 | 
130 | }; // end RIFFWAVE
131 | 
132 | (function (root, factory) {
133 |   if(typeof define === "function" && define.amd) {
134 |     // Now we're wrapping the factory and assigning the return
135 |     // value to the root (window) and returning it as well to
136 |     // the AMD loader.
137 |     define([], function(){
138 |       return (root.RIFFWAVE = factory());
139 |     });
140 |   } else if(typeof module === "object" && module.exports) {
141 |     // I've not encountered a need for this yet, since I haven't
142 |     // run into a scenario where plain modules depend on CommonJS
143 |     // *and* I happen to be loading in a CJS browser environment
144 |     // but I'm including it for the sake of being thorough
145 |     module.exports = (root.RIFFWAVE = factory());
146 |   } else {
147 |     root.RIFFWAVE = factory();
148 |   }
149 | }(this, function() {
150 |   // module code here....
151 |   return RIFFWAVE;
152 | }));
153 | 


--------------------------------------------------------------------------------
/e2e-tests.js:
--------------------------------------------------------------------------------
  1 | const { test, expect } = require('@playwright/test');
  2 | const path = require('path');
  3 | const fs = require('fs');
  4 | 
  5 | const BASE_URL = 'http://localhost:8000';
  6 | 
  7 | const ALL_PARAMS = [
  8 |   'oldParams', 'wave_type',
  9 |   'p_env_attack', 'p_env_sustain', 'p_env_punch', 'p_env_decay',
 10 |   'p_base_freq', 'p_freq_limit', 'p_freq_ramp', 'p_freq_dramp',
 11 |   'p_vib_strength', 'p_vib_speed',
 12 |   'p_arp_mod', 'p_arp_speed',
 13 |   'p_duty', 'p_duty_ramp',
 14 |   'p_repeat_speed',
 15 |   'p_pha_offset', 'p_pha_ramp',
 16 |   'p_lpf_freq', 'p_lpf_ramp', 'p_lpf_resonance',
 17 |   'p_hpf_freq', 'p_hpf_ramp',
 18 |   'sound_vol', 'sample_rate', 'sample_size'
 19 | ];
 20 | 
 21 | function compareParams(actual, expected, expect) {
 22 |   for (const param of ALL_PARAMS) {
 23 |     if (typeof expected[param] === 'number' && !Number.isInteger(expected[param])) {
 24 |       expect(actual[param]).toBeCloseTo(expected[param], 5);
 25 |     } else {
 26 |       expect(actual[param]).toBe(expected[param]);
 27 |     }
 28 |   }
 29 | }
 30 | 
 31 | test.describe('jsfxr', () => {
 32 |   test.beforeEach(async ({ page }) => {
 33 |     await page.goto(BASE_URL + '/index.html');
 34 |     await page.waitForFunction(() => typeof PARAMS !== 'undefined');
 35 |   });
 36 | 
 37 |   test.describe('Generator buttons', () => {
 38 |     const presets = [
 39 |       'pickupCoin', 'laserShoot', 'explosion', 'powerUp',
 40 |       'hitHurt', 'jump', 'click', 'blipSelect', 'synth', 'tone'
 41 |     ];
 42 | 
 43 |     for (const preset of presets) {
 44 |       test(`${preset} generates sound data`, async ({ page }) => {
 45 |         const buttonText = {
 46 |           pickupCoin: 'Pickup/coin',
 47 |           laserShoot: 'Laser/shoot',
 48 |           powerUp: 'Powerup',
 49 |           hitHurt: 'Hit/hurt',
 50 |           blipSelect: 'Blip/select',
 51 |         }[preset] || preset.charAt(0).toUpperCase() + preset.slice(1);
 52 | 
 53 |         await page.click(`button:has-text("${buttonText}")`);
 54 | 
 55 |         const hasSound = await page.evaluate(() => {
 56 |           return !!SOUND && !!SOUND.dataURI && SOUND.dataURI.length > 100;
 57 |         });
 58 |         expect(hasSound).toBe(true);
 59 | 
 60 |         const hasParams = await page.evaluate(() => {
 61 |           return !!PARAMS && typeof PARAMS.wave_type === 'number';
 62 |         });
 63 |         expect(hasParams).toBe(true);
 64 |       });
 65 |     }
 66 | 
 67 |     test('Random generates sound data', async ({ page }) => {
 68 |       await page.click('button:has-text("Random")');
 69 |       const hasSound = await page.evaluate(() => {
 70 |         return !!SOUND && !!SOUND.dataURI && SOUND.dataURI.length > 100;
 71 |       });
 72 |       expect(hasSound).toBe(true);
 73 |     });
 74 | 
 75 |     test('Mutate modifies parameters', async ({ page }) => {
 76 |       await page.click('button:has-text("Pickup/coin")');
 77 |       const before = await page.evaluate(() => JSON.stringify(PARAMS));
 78 | 
 79 |       await page.click('button:has-text("Mutate")');
 80 |       const after = await page.evaluate(() => JSON.stringify(PARAMS));
 81 | 
 82 |       expect(before).not.toBe(after);
 83 |     });
 84 |   });
 85 | 
 86 |   test.describe('Waveform selection', () => {
 87 |     const waveforms = [
 88 |       { id: 'square', value: 0 },
 89 |       { id: 'sawtooth', value: 1 },
 90 |       { id: 'sine', value: 2 },
 91 |       { id: 'noise', value: 3 },
 92 |     ];
 93 | 
 94 |     for (const wf of waveforms) {
 95 |       test(`${wf.id} waveform can be selected`, async ({ page }) => {
 96 |         await page.click(`label[for="${wf.id}"]`);
 97 |         const waveType = await page.evaluate(() => PARAMS.wave_type);
 98 |         expect(waveType).toBe(wf.value);
 99 |       });
100 |     }
101 | 
102 |     test('duty cycle sliders disable for sine wave', async ({ page }) => {
103 |       await page.click('label[for="sine"]');
104 |       const dutyDisabled = await page.evaluate(() => {
105 |         return document.getElementById('p_duty').disabled;
106 |       });
107 |       expect(dutyDisabled).toBe(true);
108 |     });
109 | 
110 |     test('duty cycle sliders disable for noise wave', async ({ page }) => {
111 |       await page.click('label[for="noise"]');
112 |       const dutyDisabled = await page.evaluate(() => {
113 |         return document.getElementById('p_duty').disabled;
114 |       });
115 |       expect(dutyDisabled).toBe(true);
116 |     });
117 | 
118 |     test('duty cycle sliders enable for square wave', async ({ page }) => {
119 |       await page.click('label[for="sine"]');
120 |       await page.click('label[for="square"]');
121 |       const dutyDisabled = await page.evaluate(() => {
122 |         return document.getElementById('p_duty').disabled;
123 |       });
124 |       expect(dutyDisabled).toBe(false);
125 |     });
126 |   });
127 | 
128 |   test.describe('Sample rate selection', () => {
129 |     const rates = [44100, 22050, 11025, 5512];
130 | 
131 |     for (const rate of rates) {
132 |       test(`${rate} Hz can be selected`, async ({ page }) => {
133 |         await page.click(`label[for="${rate}"]`);
134 |         const sampleRate = await page.evaluate(() => PARAMS.sample_rate);
135 |         expect(sampleRate).toBe(rate);
136 |       });
137 |     }
138 |   });
139 | 
140 |   test.describe('Sample size selection', () => {
141 |     test('8 bit can be selected', async ({ page }) => {
142 |       await page.click('label[for="8"]');
143 |       const sampleSize = await page.evaluate(() => PARAMS.sample_size);
144 |       expect(sampleSize).toBe(8);
145 |     });
146 | 
147 |     test('16 bit can be selected', async ({ page }) => {
148 |       await page.click('label[for="16"]');
149 |       const sampleSize = await page.evaluate(() => PARAMS.sample_size);
150 |       expect(sampleSize).toBe(16);
151 |     });
152 |   });
153 | 
154 |   test.describe('Sliders', () => {
155 |     test('volume slider changes sound volume', async ({ page }) => {
156 |       await page.click('button:has-text("Pickup/coin")');
157 |       
158 |       // Get initial state (default is 0.25 = slider value 250)
159 |       const initialSliderVal = await page.evaluate(() => 
160 |         parseInt(document.getElementById('sound_vol').value)
161 |       );
162 |       
163 |       // Get slider element bounding box for drag calculations
164 |       const slider = page.locator('#sound_vol');
165 |       const box = await slider.boundingBox();
166 |       
167 |       // Drag to ~50% (500/1000)
168 |       const startX = box.x + (initialSliderVal / 1000) * box.width;
169 |       const targetX1 = box.x + 0.5 * box.width;
170 |       const centerY = box.y + box.height / 2;
171 |       
172 |       await page.mouse.move(startX, centerY);
173 |       await page.mouse.down();
174 |       await page.mouse.move(targetX1, centerY);
175 |       await page.mouse.up();
176 |       await page.waitForTimeout(100);
177 | 
178 |       const paramVol1 = await page.evaluate(() => PARAMS.sound_vol);
179 |       const sliderValue1 = await page.evaluate(() => 
180 |         parseInt(document.getElementById('sound_vol').value)
181 |       );
182 |       expect(sliderValue1).toBeGreaterThan(400);
183 |       expect(sliderValue1).toBeLessThan(600);
184 |       expect(paramVol1).toBeGreaterThan(0.4);
185 |       expect(paramVol1).toBeLessThan(0.6);
186 | 
187 |       // Drag back to ~25% (250/1000)
188 |       const currentX = box.x + (sliderValue1 / 1000) * box.width;
189 |       const targetX2 = box.x + 0.25 * box.width;
190 |       
191 |       await page.mouse.move(currentX, centerY);
192 |       await page.mouse.down();
193 |       await page.mouse.move(targetX2, centerY);
194 |       await page.mouse.up();
195 |       await page.waitForTimeout(100);
196 | 
197 |       const paramVol2 = await page.evaluate(() => PARAMS.sound_vol);
198 |       const sliderValue2 = await page.evaluate(() => 
199 |         parseInt(document.getElementById('sound_vol').value)
200 |       );
201 |       expect(sliderValue2).toBeGreaterThan(200);
202 |       expect(sliderValue2).toBeLessThan(300);
203 |       expect(paramVol2).toBeGreaterThan(0.2);
204 |       expect(paramVol2).toBeLessThan(0.3);
205 |     });
206 | 
207 |     test('signed sliders accept negative values', async ({ page }) => {
208 |       const signedSliders = [
209 |         'p_freq_ramp', 'p_freq_dramp', 'p_arp_mod', 'p_duty_ramp',
210 |         'p_pha_offset', 'p_pha_ramp', 'p_lpf_ramp', 'p_hpf_ramp'
211 |       ];
212 | 
213 |       for (const slider of signedSliders) {
214 |         const min = await page.evaluate(
215 |           (id) => parseInt(document.getElementById(id).min),
216 |           slider
217 |         );
218 |         expect(min).toBe(-1000);
219 |       }
220 |     });
221 | 
222 |     test('unsigned sliders have min 0', async ({ page }) => {
223 |       const unsignedSliders = [
224 |         'p_env_attack', 'p_env_sustain', 'p_env_punch', 'p_env_decay',
225 |         'p_base_freq', 'p_freq_limit', 'p_vib_strength', 'p_vib_speed'
226 |       ];
227 | 
228 |       for (const slider of unsignedSliders) {
229 |         const min = await page.evaluate(
230 |           (id) => parseInt(document.getElementById(id).min),
231 |           slider
232 |         );
233 |         expect(min).toBe(0);
234 |       }
235 |     });
236 | 
237 |     test('slider labels exist and display values', async ({ page }) => {
238 |       await page.click('button:has-text("Pickup/coin")');
239 |       
240 |       // Check that labels exist for key sliders
241 |       const slidersWithUnits = [
242 |         { id: 'p_env_attack', unit: 'sec' },
243 |         { id: 'p_env_sustain', unit: 'sec' },
244 |         { id: 'p_env_decay', unit: 'sec' },
245 |         { id: 'p_base_freq', unit: 'Hz' },
246 |         { id: 'sound_vol', unit: 'dB' },
247 |       ];
248 | 
249 |       for (const { id, unit } of slidersWithUnits) {
250 |         const outputText = await page.evaluate(
251 |           (sliderId) => document.querySelector(`output[for="${sliderId}"]`).textContent,
252 |           id
253 |         );
254 |         expect(outputText).toContain(unit);
255 |       }
256 |     });
257 | 
258 |     test('slider labels update when slider is moved', async ({ page }) => {
259 |       await page.click('button:has-text("Pickup/coin")');
260 |       
261 |       // Get initial output value for attack time
262 |       const initialOutput = await page.evaluate(
263 |         () => document.querySelector('output[for="p_env_attack"]').textContent
264 |       );
265 |       
266 |       // Move the attack slider to max
267 |       const slider = page.locator('#p_env_attack');
268 |       const box = await slider.boundingBox();
269 |       const startX = box.x + 10;
270 |       const endX = box.x + box.width - 10;
271 |       const centerY = box.y + box.height / 2;
272 |       
273 |       await page.mouse.move(startX, centerY);
274 |       await page.mouse.down();
275 |       await page.mouse.move(endX, centerY);
276 |       await page.mouse.up();
277 |       
278 |       // Get updated output value
279 |       const updatedOutput = await page.evaluate(
280 |         () => document.querySelector('output[for="p_env_attack"]').textContent
281 |       );
282 |       
283 |       expect(updatedOutput).not.toBe(initialOutput);
284 |       expect(updatedOutput).toContain('sec');
285 |     });
286 |   });
287 | 
288 |   test.describe('URL hash / permalink', () => {
289 |     test('share link updates when sound is generated', async ({ page }) => {
290 |       await page.click('button:has-text("Pickup/coin")');
291 |       
292 |       const shareHref = await page.evaluate(() => 
293 |         document.getElementById('share').getAttribute('href')
294 |       );
295 |       
296 |       expect(shareHref).toMatch(/^#[1-9A-HJ-NP-Za-km-z]+$/);
297 |       expect(shareHref.length).toBeGreaterThan(10);
298 |     });
299 | 
300 |     test('hash updates when URL already has hash', async ({ page }) => {
301 |       // Navigate with an existing hash so the code will update location.hash
302 |       await page.goto(BASE_URL + '/index.html#test');
303 |       await page.waitForFunction(() => typeof PARAMS !== 'undefined');
304 |       
305 |       await page.click('button:has-text("Pickup/coin")');
306 |       
307 |       const hash = await page.evaluate(() => location.hash);
308 |       
309 |       // Hash should now be a valid B58 string (not #test anymore)
310 |       expect(hash).toMatch(/^#[1-9A-HJ-NP-Za-km-z]+$/);
311 |       expect(hash.length).toBeGreaterThan(10);
312 |     });
313 | 
314 |     test('hash changes when different preset is selected', async ({ page }) => {
315 |       await page.goto(BASE_URL + '/index.html#existing');
316 |       await page.waitForFunction(() => typeof PARAMS !== 'undefined');
317 |       
318 |       await page.click('button:has-text("Pickup/coin")');
319 |       const hash1 = await page.evaluate(() => location.hash);
320 |       
321 |       await page.click('button:has-text("Explosion")');
322 |       const hash2 = await page.evaluate(() => location.hash);
323 |       
324 |       expect(hash1).not.toBe(hash2);
325 |     });
326 | 
327 |     test('loading with hash restores parameters', async ({ page }) => {
328 |       await page.click('button:has-text("Explosion")');
329 |       
330 |       const shareHref = await page.evaluate(() => 
331 |         document.getElementById('share').getAttribute('href')
332 |       );
333 |       const originalParams = await page.evaluate(() => JSON.stringify(PARAMS));
334 | 
335 |       // Navigate with the hash from share link
336 |       await page.goto(BASE_URL + '/index.html' + shareHref);
337 |       await page.waitForFunction(() => typeof PARAMS !== 'undefined');
338 | 
339 |       const loadedParams = await page.evaluate(() => JSON.stringify(PARAMS));
340 |       
341 |       expect(loadedParams).toBe(originalParams);
342 |     });
343 | 
344 |     test('loading with hash updates UI controls', async ({ page }) => {
345 |       // Generate a sound first, then change waveform after
346 |       // (presets overwrite wave_type, so must change after)
347 |       await page.click('button:has-text("Pickup/coin")');
348 |       await page.click('label[for="noise"]');
349 |       
350 |       const shareHref = await page.evaluate(() => 
351 |         document.getElementById('share').getAttribute('href')
352 |       );
353 | 
354 |       // Navigate fresh with the hash
355 |       await page.goto(BASE_URL + '/index.html' + shareHref);
356 |       await page.waitForFunction(() => typeof PARAMS !== 'undefined');
357 | 
358 |       // Verify the noise radio button is checked
359 |       const noiseChecked = await page.isChecked('#noise');
360 |       expect(noiseChecked).toBe(true);
361 |     });
362 | 
363 |     test('permalink link has correct href', async ({ page }) => {
364 |       await page.click('button:has-text("Jump")');
365 |       const shareHref = await page.getAttribute('#share', 'href');
366 |       
367 |       expect(shareHref).toMatch(/^#[1-9A-HJ-NP-Za-km-z]+$/);
368 |       expect(shareHref.length).toBeGreaterThan(10);
369 |     });
370 |   });
371 | 
372 |   test.describe('Copy code', () => {
373 |     test('copy buffer contains B58 string', async ({ page }) => {
374 |       await page.click('button:has-text("Pickup/coin")');
375 |       const copyValue = await page.inputValue('#copybuffer');
376 |       expect(copyValue.length).toBeGreaterThan(10);
377 |       const isValidB58 = /^[1-9A-HJ-NP-Za-km-z]+$/.test(copyValue);
378 |       expect(isValidB58).toBe(true);
379 |     });
380 | 
381 |     test('copy code B58 round-trips all parameters', async ({ page }) => {
382 |       await page.click('button:has-text("Explosion")');
383 |       const originalParams = await page.evaluate(() => {
384 |         const p = {};
385 |         for (const k in PARAMS) {
386 |           if (PARAMS.hasOwnProperty(k)) p[k] = PARAMS[k];
387 |         }
388 |         return p;
389 |       });
390 |       const b58 = await page.inputValue('#copybuffer');
391 | 
392 |       const decodedParams = await page.evaluate((b58str) => {
393 |         return sfxr.b58decode(b58str);
394 |       }, b58);
395 | 
396 |       for (const param of ALL_PARAMS) {
397 |         if (param === 'oldParams' || param === 'sound_vol' ||
398 |             param === 'sample_rate' || param === 'sample_size') {
399 |           continue;
400 |         }
401 |         if (typeof originalParams[param] === 'number' &&
402 |             !Number.isInteger(originalParams[param])) {
403 |           expect(decodedParams[param]).toBeCloseTo(originalParams[param], 4);
404 |         } else {
405 |           expect(decodedParams[param]).toBe(originalParams[param]);
406 |         }
407 |       }
408 |     });
409 | 
410 |     test('copy button copies to clipboard', async ({ context, page }) => {
411 |       await context.grantPermissions(['clipboard-read', 'clipboard-write']);
412 |       await page.click('button:has-text("Pickup/coin")');
413 |       await page.click('button:has-text("Copy code")');
414 | 
415 |       const clipboard = await page.evaluate(() =>
416 |         navigator.clipboard.readText()
417 |       );
418 |       const copyValue = await page.inputValue('#copybuffer');
419 |       expect(clipboard).toBe(copyValue);
420 |     });
421 |   });
422 | 
423 |   test.describe('WAV download', () => {
424 |     test('WAV link has data URI', async ({ page }) => {
425 |       await page.click('button:has-text("Pickup/coin")');
426 |       const href = await page.getAttribute('#wav', 'href');
427 |       expect(href).toMatch(/^data:audio\/wav;base64,/);
428 |     });
429 | 
430 |     test('WAV filename matches preset', async ({ page }) => {
431 |       await page.click('button:has-text("Explosion")');
432 |       const download = await page.getAttribute('#wav', 'download');
433 |       expect(download).toBe('explosion.wav');
434 |     });
435 |   });
436 | 
437 |   test.describe('JSON download', () => {
438 |     test('JSON link has data URI with all parameters', async ({ page }) => {
439 |       await page.click('button:has-text("Pickup/coin")');
440 |       const originalParams = await page.evaluate(() => {
441 |         const p = {};
442 |         for (const k in PARAMS) {
443 |           if (PARAMS.hasOwnProperty(k)) p[k] = PARAMS[k];
444 |         }
445 |         return p;
446 |       });
447 | 
448 |       const href = await page.getAttribute('#json', 'href');
449 |       expect(href).toMatch(/^data:text\/plain;charset=UTF-8,/);
450 | 
451 |       const jsonStr = decodeURIComponent(
452 |         href.replace('data:text/plain;charset=UTF-8,', '')
453 |       );
454 |       const parsed = JSON.parse(jsonStr);
455 | 
456 |       compareParams(parsed, originalParams, expect);
457 |     });
458 | 
459 |     test('JSON filename matches preset', async ({ page }) => {
460 |       await page.click('button:has-text("Powerup")');
461 |       const download = await page.getAttribute('#json', 'download');
462 |       expect(download).toBe('powerUp.json');
463 |     });
464 |   });
465 | 
466 |   test.describe('Serialize / Deserialize', () => {
467 |     test('serialize button shows textarea with JSON', async ({ page }) => {
468 |       await page.click('button:has-text("Pickup/coin")');
469 |       await page.click('button:has-text("Serialize")');
470 | 
471 |       const isVisible = await page.isVisible('#serialize');
472 |       expect(isVisible).toBe(true);
473 | 
474 |       const textareaValue = await page.inputValue('textarea');
475 |       const parsed = JSON.parse(textareaValue);
476 |       expect(parsed).toHaveProperty('wave_type');
477 |     });
478 | 
479 |     test('deserialize restores all parameters from textarea', async ({ page }) => {
480 |       const testParams = {
481 |         oldParams: true,
482 |         wave_type: 3,
483 |         p_env_attack: 0.123,
484 |         p_env_sustain: 0.234,
485 |         p_env_punch: 0.345,
486 |         p_env_decay: 0.456,
487 |         p_base_freq: 0.567,
488 |         p_freq_limit: 0.111,
489 |         p_freq_ramp: -0.222,
490 |         p_freq_dramp: 0.333,
491 |         p_vib_strength: 0.444,
492 |         p_vib_speed: 0.555,
493 |         p_arp_mod: -0.666,
494 |         p_arp_speed: 0.777,
495 |         p_duty: 0.888,
496 |         p_duty_ramp: -0.999,
497 |         p_repeat_speed: 0.321,
498 |         p_pha_offset: -0.432,
499 |         p_pha_ramp: 0.543,
500 |         p_lpf_freq: 0.654,
501 |         p_lpf_ramp: -0.765,
502 |         p_lpf_resonance: 0.876,
503 |         p_hpf_freq: 0.987,
504 |         p_hpf_ramp: -0.098,
505 |         sound_vol: 0.5,
506 |         sample_rate: 22050,
507 |         sample_size: 16
508 |       };
509 | 
510 |       await page.click('button:has-text("Serialize")');
511 |       await page.fill('textarea', JSON.stringify(testParams));
512 |       await page.click('button:has-text("Deserialize")');
513 | 
514 |       const loadedParams = await page.evaluate(() => {
515 |         const p = {};
516 |         for (const k in PARAMS) {
517 |           if (PARAMS.hasOwnProperty(k)) p[k] = PARAMS[k];
518 |         }
519 |         return p;
520 |       });
521 | 
522 |       compareParams(loadedParams, testParams, expect);
523 |     });
524 | 
525 |     test('serialize then deserialize round-trips all parameters', async ({ page }) => {
526 |       await page.click('button:has-text("Synth")');
527 |       const originalParams = await page.evaluate(() => {
528 |         const p = {};
529 |         for (const k in PARAMS) {
530 |           if (PARAMS.hasOwnProperty(k)) p[k] = PARAMS[k];
531 |         }
532 |         return p;
533 |       });
534 | 
535 |       await page.click('button:has-text("Serialize")');
536 |       const serialized = await page.inputValue('textarea');
537 | 
538 |       await page.click('button:has-text("Random")');
539 | 
540 |       await page.fill('textarea', serialized);
541 |       await page.click('button:has-text("Deserialize")');
542 | 
543 |       const restoredParams = await page.evaluate(() => {
544 |         const p = {};
545 |         for (const k in PARAMS) {
546 |           if (PARAMS.hasOwnProperty(k)) p[k] = PARAMS[k];
547 |         }
548 |         return p;
549 |       });
550 | 
551 |       compareParams(restoredParams, originalParams, expect);
552 |     });
553 |   });
554 | 
555 |   test.describe('File upload', () => {
556 |     test('file upload restores all parameters', async ({ page }) => {
557 |       const fixtureDir = path.join(__dirname, 'test-fixtures');
558 |       if (!fs.existsSync(fixtureDir)) {
559 |         fs.mkdirSync(fixtureDir);
560 |       }
561 | 
562 |       const testParams = {
563 |         oldParams: true,
564 |         wave_type: 2,
565 |         p_env_attack: 0.051,
566 |         p_env_sustain: 0.152,
567 |         p_env_punch: 0.253,
568 |         p_env_decay: 0.354,
569 |         p_base_freq: 0.455,
570 |         p_freq_limit: 0.121,
571 |         p_freq_ramp: -0.232,
572 |         p_freq_dramp: 0.343,
573 |         p_vib_strength: 0.454,
574 |         p_vib_speed: 0.565,
575 |         p_arp_mod: -0.676,
576 |         p_arp_speed: 0.787,
577 |         p_duty: 0.898,
578 |         p_duty_ramp: -0.909,
579 |         p_repeat_speed: 0.313,
580 |         p_pha_offset: -0.424,
581 |         p_pha_ramp: 0.535,
582 |         p_lpf_freq: 0.646,
583 |         p_lpf_ramp: -0.757,
584 |         p_lpf_resonance: 0.868,
585 |         p_hpf_freq: 0.979,
586 |         p_hpf_ramp: -0.089,
587 |         sound_vol: 0.75,
588 |         sample_rate: 11025,
589 |         sample_size: 16
590 |       };
591 | 
592 |       const fixturePath = path.join(fixtureDir, 'test-sound.json');
593 |       fs.writeFileSync(fixturePath, JSON.stringify(testParams));
594 | 
595 |       await page.setInputFiles('#open_save_impl', fixturePath);
596 |       await page.waitForFunction(() => PARAMS.wave_type === 2);
597 | 
598 |       const loadedParams = await page.evaluate(() => {
599 |         const p = {};
600 |         for (const k in PARAMS) {
601 |           if (PARAMS.hasOwnProperty(k)) p[k] = PARAMS[k];
602 |         }
603 |         return p;
604 |       });
605 | 
606 |       compareParams(loadedParams, testParams, expect);
607 |     });
608 |   });
609 | 
610 |   test.describe('Stats display', () => {
611 |     test('file size is displayed', async ({ page }) => {
612 |       await page.click('button:has-text("Pickup/coin")');
613 |       const fileSize = await page.textContent('#file_size');
614 |       expect(fileSize).toMatch(/\d+kB/);
615 |     });
616 | 
617 |     test('sample count is displayed', async ({ page }) => {
618 |       await page.click('button:has-text("Pickup/coin")');
619 |       const samples = await page.textContent('#num_samples');
620 |       expect(parseInt(samples)).toBeGreaterThan(0);
621 |     });
622 | 
623 |     test('clipping count is displayed', async ({ page }) => {
624 |       await page.click('button:has-text("Pickup/coin")');
625 |       const clipping = await page.textContent('#clipping');
626 |       expect(parseInt(clipping)).toBeGreaterThanOrEqual(0);
627 |     });
628 |   });
629 | 
630 |   test.describe('Play button', () => {
631 |     test('play button replays without regenerating', async ({ page }) => {
632 |       await page.click('button:has-text("Pickup/coin")');
633 |       const firstDataURI = await page.evaluate(() => SOUND.dataURI);
634 | 
635 |       await page.evaluate(() => {
636 |         PARAMS.p_base_freq = 0.8;
637 |       });
638 | 
639 |       await page.click('#export button:has-text("Play")');
640 | 
641 |       const secondDataURI = await page.evaluate(() => SOUND.dataURI);
642 |       expect(firstDataURI).toBe(secondDataURI);
643 |     });
644 |   });
645 | 
646 |   test.describe('Volume persistence', () => {
647 |     test('volume setting resets when generating new sounds', async ({ page }) => {
648 |       // Set volume to ~75%
649 |       const slider = page.locator('#sound_vol');
650 |       const box = await slider.boundingBox();
651 |       const targetX = box.x + 0.75 * box.width;
652 |       const centerY = box.y + box.height / 2;
653 |       
654 |       await page.mouse.move(box.x + 10, centerY);
655 |       await page.mouse.down();
656 |       await page.mouse.move(targetX, centerY);
657 |       await page.mouse.up();
658 |       await page.waitForTimeout(100);
659 | 
660 |       const volAfterSlider = await page.evaluate(() => PARAMS.sound_vol);
661 |       expect(volAfterSlider).toBeGreaterThan(0.7);
662 | 
663 |       // Generate a new sound
664 |       await page.click('button:has-text("Explosion")');
665 | 
666 |       // Volume should reset to default
667 |       const volAfterGen = await page.evaluate(() => PARAMS.sound_vol);
668 |       expect(volAfterGen).toBe(0.25);
669 |     });
670 | 
671 |     test('sample rate persists when generating new sounds', async ({ page }) => {
672 |       await page.click('label[for="22050"]');
673 |       const rateAfterSelect = await page.evaluate(() => PARAMS.sample_rate);
674 |       expect(rateAfterSelect).toBe(22050);
675 | 
676 |       await page.click('button:has-text("Jump")');
677 | 
678 |       const rateAfterGen = await page.evaluate(() => PARAMS.sample_rate);
679 |       expect(rateAfterGen).toBe(22050);
680 |     });
681 | 
682 |     test('sample size persists when generating new sounds', async ({ page }) => {
683 |       await page.click('label[for="16"]');
684 |       const sizeAfterSelect = await page.evaluate(() => PARAMS.sample_size);
685 |       expect(sizeAfterSelect).toBe(16);
686 | 
687 |       await page.click('button:has-text("Powerup")');
688 | 
689 |       const sizeAfterGen = await page.evaluate(() => PARAMS.sample_size);
690 |       expect(sizeAfterGen).toBe(16);
691 |     });
692 |   });
693 | });
694 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 | <title>jsfxr - 8 bit sound maker and online sfx generator</title>
  5 | <meta name="description" content="A simple online 8 bit sound maker and sfx generator. You can also use it as a sound library in your JavaScript games.">
  6 | 
  7 | <meta charset="utf-8" >
  8 | <meta name="viewport" content="width=device-width, initial-scale=0.95">
  9 | <link type="image/png" href="/icon.png" rel="icon">
 10 | 
 11 | <!-- twitter social -->
 12 | <meta content="https://sfxr.me/header.png" name="twitter:image:src">
 13 | <meta content="@mccrmx" name="twitter:site">
 14 | <meta content="@mccrmx" name="twitter:creator">
 15 | <meta content="summary" name="twitter:card">
 16 | <meta content="jsfxr" name="twitter:title">
 17 | <meta content="8-bit game sound effects generator in JavaScript." name="twitter:description">
 18 | <!-- other social -->
 19 | <meta content="https://sfxr.me/header.png" property="og:image">
 20 | <meta content="jsfxr" property="og:site_name">
 21 | <meta content="website" property="og:type">
 22 | <meta content="jsfxr" property="og:title">
 23 | <meta content="https://sfxr.me/" property="og:url">
 24 | <meta content="8-bit game sound effects generator in JavaScript." property="og:description">
 25 | 
 26 | <script src="riffwave.js"></script>
 27 | <script src="sfxr.js"></script>
 28 | 
 29 | <script>
 30 | Params.prototype.query = function () {
 31 |   var result = "";
 32 |   for (let key in this) {
 33 |     if (this.hasOwnProperty(key)) {
 34 |       result += "&" + key + "=" + this[key];
 35 |     }
 36 |   }
 37 |   return result.substring(1);
 38 | };
 39 | 
 40 | let SOUND;
 41 | let PARAMS;
 42 | let wav;
 43 | let json;
 44 | let copyBuffer;
 45 | let share;
 46 | let file_size;
 47 | let num_samples;
 48 | let clipping;
 49 | let sfx;
 50 | let serialize;
 51 | let textarea;
 52 | let open_save_impl;
 53 | 
 54 | const SOUND_VOL = 0.25;
 55 | let SAMPLE_RATE = 44100;
 56 | let SAMPLE_SIZE = 8;
 57 | 
 58 | let h, w, canvas;
 59 | 
 60 | function updateWaveform(data) {
 61 |   if (canvas === null) {
 62 |     return;
 63 |   }
 64 | 
 65 |   let min = 1,
 66 |     max = -1;
 67 |   data.forEach((i) => {
 68 |     if (i < min) min = i;
 69 |     if (i > max) max = i;
 70 |   });
 71 |   let a = max - min;
 72 | 
 73 |   canvas.width = w;
 74 |   canvas.height = h;
 75 |   canvas.style.width = `${w}px`;
 76 |   canvas.style.height = `${h}px`;
 77 | 
 78 |   const ctx = canvas.getContext("2d");
 79 | 
 80 |   // ctx.fillStyle = "black";
 81 |   ctx.clearRect(0, 0, w, h);
 82 | 
 83 |   ctx.lineWidth = 1;
 84 |   ctx.strokeStyle = "#5b5b5b";
 85 |   ctx.beginPath();
 86 |   ctx.moveTo(0, h / 2);
 87 | 
 88 |   data.forEach((value, index) => {
 89 |     ctx.lineTo((index * w) / data.length, (value / a) * h + h / 2);
 90 |   });
 91 | 
 92 |   ctx.stroke();
 93 | }
 94 | 
 95 | function gen(fx) {
 96 |   PARAMS = new Params();
 97 |   PARAMS.sound_vol = SOUND_VOL;
 98 |   PARAMS.sample_rate = SAMPLE_RATE;
 99 |   PARAMS.sample_size = SAMPLE_SIZE;
100 |   var name;
101 |   if (fx.indexOf("#") == 0) {
102 |     PARAMS.fromB58(fx.slice(1));
103 |     name = "random";
104 |   } else {
105 |     PARAMS[fx]();
106 |     name = fx;
107 |   }
108 |   wav.innerText = `${name}.wav`;
109 |   wav.setAttribute("download", `${name}.wav`);
110 |   json.innerText = `${name}.json`;
111 |   json.setAttribute("download", `${name}.json`);
112 |   updateUi();
113 |   play();
114 | }
115 | 
116 | function mut() {
117 |   PARAMS.mutate();
118 |   updateUi();
119 |   play();
120 | }
121 | 
122 | function play(noregen) {
123 |     if (!noregen) {
124 |       var b58 = PARAMS.toB58();
125 |       if (document.location.href.indexOf("#") != -1) {
126 |         document.location.hash = PARAMS.toB58();
127 |       }
128 |       //$("#permalink").attr("href", "#" + b58)
129 |       //$("#permalink").text(b58)
130 |       copyBuffer.value = b58;
131 |       share.setAttribute("href", "#" + b58);
132 | 
133 |       SOUND = sfxr.toWave(PARAMS);
134 |       file_size.innerText = Math.round(SOUND.wav.length / 1024) + "kB";
135 |       num_samples.innerText = SOUND.header.subChunk2Size / (SOUND.header.bitsPerSample >> 3);
136 |       clipping.innerText = SOUND.clipping;
137 |     }
138 | 
139 |     wav.setAttribute("href", SOUND.dataURI);
140 |     json.setAttribute("href", 'data:text/plain;charset=UTF-8,' +
141 |       encodeURIComponent(serialize_params_to_string()));
142 | 
143 |     updateWaveform(SOUND.buffer);
144 | 
145 |     SOUND.getAudio().play();
146 | }
147 | 
148 | function copy() {
149 |   copyBuffer.style.display = "block";
150 |   //b.val($("#permalink").text());
151 |   copyBuffer.select();
152 |   document.execCommand("copy");
153 |   copyBuffer.style.display = "none";
154 | }
155 | 
156 | function copyText(element) {
157 |   element.select();
158 |   document.execCommand("copy");
159 |   element.setSelectionRange(0, 0);
160 |   element.blur();
161 | }
162 | 
163 | function serialize_params_to_string() {
164 |   return JSON.stringify(PARAMS, null, 2);
165 | }
166 | 
167 | function serialize_params() {
168 |   textarea.value = JSON.stringify(PARAMS, null, 2);
169 |   serialize.style.display = "block";
170 | }
171 | 
172 | function deserialize_params() {
173 |   deserialize_params_from_string(textarea.value);
174 | }
175 | 
176 | function deserialize_params_from_string(json_string) {
177 |   var newPARAMS = JSON.parse(json_string);
178 |   PARAMS.fromJSON(newPARAMS);
179 |   play();
180 |   updateUi();
181 | }
182 | 
183 | function upload_params_from_file() {
184 |   open_save_impl.click();
185 | }
186 | 
187 | function on_upload_file_selected(e) {
188 |   var file = e.target.files[0];
189 |   if (!file) {
190 |     return;
191 |   }
192 |   var reader = new FileReader();
193 |   reader.onload = function(e) {
194 |     var contents = e.target.result;
195 |     textarea.value = contents;
196 |     deserialize_params_from_string(contents);
197 |     open_save_impl.value = "";
198 |   };
199 |   reader.readAsText(file);
200 | }
201 | 
202 | function disable() {
203 |   var duty = PARAMS.wave_type == SQUARE || PARAMS.wave_type == SAWTOOTH;
204 | 
205 |   if (duty) {
206 |     document.getElementById("p_duty")?.removeAttribute("disabled");
207 |     document.getElementById("p_duty_ramp")?.removeAttribute("disabled");
208 |   } else {
209 |     document.getElementById("p_duty")?.setAttribute("disabled", "disabled");
210 |     document
211 |       .getElementById("p_duty_ramp")
212 |       ?.setAttribute("disabled", "disabled");
213 |   }
214 | }
215 | 
216 | function updateUi() {
217 |   for (let param in PARAMS) {
218 |     let value = PARAMS[param];
219 |     if (param == "wave_type") {
220 |       let item = document.querySelector(
221 |         `#shape input[type='radio'][value='${value}']`
222 |       );
223 |       item.checked = true;
224 |     } else if (param == "sample_rate") {
225 |       let item = document.querySelector(
226 |         `#hz input[type='radio'][value='${value}']`
227 |       );
228 |       item.checked = true;
229 |     } else if (param == "sample_size") {
230 |       let item = document.querySelector(
231 |         `#bits input[type='radio'][value='${value}']`
232 |       );
233 |       item.checked = true;
234 |     } else {
235 |       let item = document.getElementById(param);
236 |       if (item && item.type === "range") {
237 |         item.value = value * 1000;
238 |         convert(item);
239 |       }
240 |     }
241 |   }
242 |   disable();
243 | }
244 | 
245 | document.addEventListener("DOMContentLoaded", function () {
246 |   wav = document.getElementById("wav");
247 |   json = document.getElementById("json");
248 |   copyBuffer = document.getElementById("copybuffer");
249 |   share = document.getElementById("share");
250 |   file_size = document.getElementById("file_size");
251 |   num_samples = document.getElementById("num_samples");
252 |   clipping = document.getElementById("clipping");
253 |   serialize = document.getElementById("serialize");
254 |   textarea = document.querySelector("textarea");
255 |   open_save_impl = document.getElementById("open_save_impl");
256 |   open_save_impl.addEventListener("change", on_upload_file_selected);
257 | 
258 |   canvas = document.getElementById("waveform");
259 |   if (canvas) {
260 |     w = canvas.offsetWidth;
261 |     h = (w * 9) / 16;
262 |   }
263 | 
264 |   document.querySelectorAll("#shape input[type=radio]").forEach((item) => {
265 |     item.addEventListener("change", (event) => {
266 |       PARAMS.wave_type = parseInt(event.target.value);
267 |       disable();
268 |       play();
269 |     });
270 |   });
271 | 
272 |   document.querySelectorAll("#hz input[type=radio]").forEach((item) => {
273 |     item.addEventListener("change", (event) => {
274 |       SAMPLE_RATE = PARAMS.sample_rate = parseInt(event.target.value);
275 |       play();
276 |     });
277 |   });
278 | 
279 |   document.querySelectorAll("#bits input[type=radio]").forEach((item) => {
280 |     item.addEventListener("change", (event) => {
281 |       SAMPLE_SIZE = PARAMS.sample_size = parseInt(event.target.value);
282 |       play();
283 |     });
284 |   });
285 | 
286 |   document.querySelectorAll(".slider").forEach((item) => {
287 |     let id = item.id;
288 | 
289 |     const div = document.createElement("div");
290 |     item.replaceWith(div);
291 | 
292 |     let label = document.createElement("label");
293 |     label.setAttribute("for", id);
294 |     label.innerHTML = item.dataset.title;
295 |     div.appendChild(label);
296 | 
297 |     let output = document.createElement("output");
298 |     output.setAttribute("for", id);
299 |     div.appendChild(output);
300 | 
301 |     if (item.dataset.position === "after") {
302 |       div.appendChild(item);
303 |     } else {
304 |       div.insertAdjacentElement("afterbegin", item);
305 |     }
306 | 
307 |     item.type = "range";
308 |     item.min = 0;
309 |     item.max = 1000;
310 |     item.value = 1000;
311 |     if (item.classList.contains("signed")) {
312 |       item.min = -1000;
313 |       item.value = 0;
314 |     }
315 | 
316 |     item.label = label;
317 |     item.output = output;
318 | 
319 |     item.addEventListener("input", () => {
320 |       convert(item);
321 |     });
322 |     item.addEventListener("change", () => {
323 |       PARAMS[id] = item.value / 1000;
324 |       convert(item);
325 |       play();
326 |     });
327 |   });
328 | 
329 |   gen(document.location.hash || "pickupCoin");
330 | });
331 | 
332 | function convert(item) {
333 |   let id = item.id;
334 |   let conv = sliders[id];
335 |   let unit = units[id];
336 |   let value = conv(item.value / 1000);
337 |   if (typeof unit === "function") {
338 |     value = unit(value);
339 |   } else {
340 |     value = value.toPrecision(4) + " " + unit;
341 |   }
342 |   item.output.innerHTML = value;
343 | }
344 | </script>
345 | 
346 | <style>
347 | * {
348 |     box-sizing: border-box;
349 | }
350 | 
351 | html {
352 |     font: 10pt Helvetica, Arial, sans-serif;
353 | }
354 | 
355 | body {
356 |     margin-left: auto;
357 |     margin-right: auto;
358 |     max-width: 800px;
359 |     width: 98%;
360 | }
361 | 
362 | h1 {
363 |     font-size: 24pt;
364 |     padding-right: 1em;
365 |     padding-top: 0;
366 |     margin-top: 0;
367 | }
368 | 
369 | h2 {
370 |     font-size: 12pt;
371 |     text-align: center;
372 |     font-weight: 400;
373 | }
374 | 
375 | header {
376 |     display: flex;
377 |     align-items: center;
378 |     justify-content: space-between;
379 |     margin: 2em;
380 | }
381 | 
382 | header img {
383 |     max-height: 64px;
384 | }
385 | 
386 | a {
387 |     text-decoration: none;
388 |     color: #00f;
389 | }
390 | 
391 | #sound_vol,
392 | #soundexport,
393 | button {
394 |     width: 160px;
395 | }
396 | 
397 | #sound_vol {
398 |     margin-top: 4px;
399 |     display: block;
400 | }
401 | 
402 | #shape label {
403 |     width: 80px;
404 | }
405 | 
406 | #hz label {
407 |     width: 40px;
408 | }
409 | 
410 | #bits label {
411 |     width: 80px;
412 | }
413 | 
414 | #wav {
415 |     font-weight: 700;
416 | }
417 | 
418 | #share {
419 |     font-weight: 700;
420 |     font-size: 1.25em;
421 |     margin-top: 1em;
422 |     display: inline-block;
423 | }
424 | 
425 | #permalink {
426 |     font-size: 0.75em;
427 |     margin-left: auto;
428 |     margin-right: auto;
429 |     text-align: center;
430 |     display: block;
431 |     margin-top: 1em;
432 |     text-overflow: ellipsis;
433 |     max-width: 100%;
434 |     overflow: hidden;
435 | }
436 | 
437 | fieldset {
438 |     border-style: solid none none;
439 |     border-color: #ccc;
440 |     border-width: 1px;
441 |     margin-bottom: 1rem;
442 |     padding-left: 0;
443 |     padding-right: 0;
444 |     margin-bottom: 0.4rem;
445 | }
446 | 
447 | fieldset legend {
448 |     margin: -0.5em;
449 |     padding: 0 0.2rem 0 0.2rem;
450 |     font-weight: 700;
451 | }
452 | 
453 | fieldset>div {
454 |     display: flex;
455 |     align-items: baseline;
456 |     line-height: 0.95em;
457 | }
458 | 
459 | fieldset output {
460 |     flex-grow: 1;
461 |     text-align: right;
462 | }
463 | 
464 | label+output {
465 |     font-weight: 400;
466 |     display: inline-block;
467 |     margin-left: 0.4rem;
468 |     font-size: 10px;
469 | }
470 | 
471 | .demo .slider {
472 |     width: 120px;
473 |     margin: 0 15px 0 0;
474 |     transform: translate(0, 2px);
475 | }
476 | 
477 | table {
478 |     margin-left: 0.25em;
479 | }
480 | 
481 | th {
482 |     padding-left: 1em;
483 |     text-align: left;
484 | }
485 | 
486 | #export {
487 |     text-align: center;
488 | }
489 | 
490 | #stats {
491 |     width: 80%;
492 | }
493 | 
494 | #stats td {
495 |     text-align: right;
496 | }
497 | 
498 | #generators button {
499 |     display: block;
500 |     margin-bottom: 2px;
501 | }
502 | 
503 | #generators button:nth-child(12),
504 | #generators button:nth-child(13),
505 | #generators button:nth-child(2) {
506 |     margin-bottom: 18px;
507 | }
508 | 
509 | #data {
510 |     width: 80%;
511 |     margin: 1em auto;
512 |     text-align: center;
513 | }
514 | 
515 | #data textarea {
516 |     width: 80%;
517 |     height: 40em;
518 |     margin-top: 1em;
519 |     min-width: 250px;
520 | }
521 | 
522 | #links {
523 |     margin: 4em auto 0 auto;
524 |     text-align: center;
525 | }
526 | 
527 | #copybuffer {
528 |     display: none;
529 | }
530 | 
531 | #serialize {
532 |     display: none;
533 | }
534 | 
535 | #serialize>button {
536 |     margin-top: 1em;
537 | }
538 | 
539 | #waveform {
540 |     border-radius: 0.4rem;
541 |     border: 1px solid #5b5b5b;
542 | }
543 | 
544 | main {
545 |     display: flex;
546 |     flex-wrap: wrap;
547 |     gap: 0.5rem;
548 |     justify-content: center;
549 | }
550 | 
551 | .buttonset {
552 |     display: flex;
553 |     flex-direction: row;
554 |     justify-content: center;
555 | }
556 | 
557 | .buttonset input {
558 |     appearance: none;
559 |     width: 0;
560 |     height: 0;
561 |     display: none;
562 | }
563 | 
564 | button {
565 |     border-radius: 6px;
566 | }
567 | 
568 | .buttonset label,
569 | button {
570 |     border: 1px solid #666;
571 |     background: linear-gradient(to bottom, #626262 50%, #555 50%, #686868);
572 |     line-height: 1.4em;
573 |     color: #eee;
574 |     cursor: pointer;
575 |     padding: 0.4em;
576 |     text-align: center;
577 | }
578 | 
579 | .buttonset label:hover,
580 | button:hover {
581 |     background: linear-gradient(to bottom, #288db1 50%, #0078a3 50%, #3a96b8);
582 |     border-color: #59b4d4;
583 | }
584 | 
585 | button.play-button {
586 |     background: linear-gradient(to bottom, #45973c 50%, #3a833c 50%, #45973c);
587 |     border-color: #3a833c;
588 |     color: #ffffff;
589 |     font-weight: bold;
590 | }
591 | 
592 | button.play-button:hover {
593 |     background: linear-gradient(to bottom, #52a847 50%, #45973c 50%, #52a847);
594 |     border-color: #52a847;
595 | }
596 | 
597 | .buttonset label:first-of-type {
598 |     border-radius: 6px 0 0 6px;
599 | }
600 | 
601 | .buttonset label:last-of-type {
602 |     border-radius: 0 6px 6px 0;
603 | }
604 | 
605 | .button,
606 | .buttonset input:checked+label {
607 |     background-image: linear-gradient(to bottom, #f58400, #f6982b);
608 |     border-color: #ffaf0f;
609 | }
610 | 
611 | input[type="range"] {
612 |     -webkit-appearance: none;
613 | }
614 | 
615 | input[type="range"]::-moz-range-thumb {
616 |     border: 1px solid #f58400;
617 |     background: linear-gradient(to bottom, #626262 50%, #555 50%, #686868);
618 |     border-radius: 6px;
619 |     width: 1.35em;
620 |     height: 1.35em;
621 |     cursor: pointer;
622 | }
623 | 
624 | input[type="range"]::-webkit-slider-thumb {
625 |     border: 1px solid #f58400;
626 |     background: linear-gradient(to bottom, #626262 50%, #555 50%, #686868);
627 |     border-radius: 6px;
628 |     width: 1.35em;
629 |     height: 1.35em;
630 |     cursor: pointer;
631 |     transform: translateY(-2px);
632 |     appearance: none;
633 | }
634 | 
635 | input[type="range"]::-moz-range-track {
636 |     border: none;
637 |     background: #262626;
638 |     height: 14px;
639 |     border-radius: 6px;
640 | }
641 | 
642 | input[type="range"]::-webkit-slider-runnable-track {
643 |     border: none;
644 |     background: #262626;
645 |     height: 14px;
646 |     border-radius: 6px;
647 | }
648 | 
649 | input[type="range"]:disabled::-moz-range-thumb {
650 |     border: 1px solid #fbd3a5;
651 |     background: #c7c7c7;
652 |     cursor: default;
653 | }
654 | 
655 | input[type="range"]:disabled::-webkit-slider-thumb {
656 |     border: 1px solid #fbd3a5;
657 |     background: #c7c7c7;
658 |     cursor: default;
659 | }
660 | 
661 | input[type="range"]:disabled::-moz-range-track {
662 |     background: #a5a5a5;
663 | }
664 | 
665 | input[type="range"]:disabled::-webkit-slider-runnable-track {
666 |     background: #a5a5a5;
667 | }
668 | </style>
669 | </head>
670 | 
671 | <body>
672 | 
673 |   <header>
674 |     <img src="logo.svg" alt="jsfxr" title="jsfxr" />
675 |   </header>
676 | 
677 |     <main>
678 |         <div id="generators">
679 |             <h2>Generator</h2>
680 |             <button onclick="gen('random')">Random</button>
681 | 
682 |             <button onclick="gen('pickupCoin')">Pickup/coin</button>
683 |             <button onclick="gen('laserShoot')">Laser/shoot</button>
684 |             <button onclick="gen('explosion')">Explosion</button>
685 |             <button onclick="gen('powerUp')">Powerup</button>
686 |             <button onclick="gen('hitHurt')">Hit/hurt</button>
687 |             <button onclick="gen('jump')">Jump</button>
688 |             <button onclick="gen('click')">Click</button>
689 |             <button onclick="gen('blipSelect')">Blip/select</button>
690 |             <button onclick="gen('synth')">Synth</button>
691 |             <button onclick="gen('tone')">Tone</button>
692 | 
693 |             <button onclick="mut()">Mutate</button>
694 | 
695 |             <button class="play-button" onclick="play(true)">Play</button>
696 | 
697 |             <input id="copybuffer" />
698 |         </div>
699 | 
700 |         <div class="demo">
701 |             <h2>Manual Settings</h2>
702 |             <form>
703 |                 <div id="shape" class="buttonset">
704 |                     <input type="radio" id="square" value=0 name="shape" />
705 |                     <label for="square">Square</label>
706 |                     <input type="radio" id="sawtooth" value=1 name="shape" checked="checked" />
707 |                     <label for="sawtooth">Sawtooth</label>
708 |                     <input type="radio" id="sine" value=2 name="shape" />
709 |                     <label for="sine">Sine</label>
710 |                     <input type="radio" id="noise" value=3 name="shape" />
711 |                     <label for="noise">Noise</label>
712 |                 </div>
713 |             </form>
714 | 
715 |             <br />
716 | 
717 |             <div>
718 |                 <fieldset>
719 |                     <legend>Envelope</legend>
720 |                     <input class="slider" id="p_env_attack" data-title="Attack time" />
721 |                     <input class="slider" id="p_env_sustain" data-title="Sustain time" />
722 |                     <input class="slider" id="p_env_punch" data-title="Sustain punch" />
723 |                     <input class="slider" id="p_env_decay" data-title="Decay time" />
724 |                 </fieldset>
725 |                 <fieldset>
726 |                     <legend>Frequency</legend>
727 |                     <input class="slider" id="p_base_freq" data-title="Start frequency" />
728 |                     <input class="slider" id="p_freq_limit" data-title="Min freq. cutoff" />
729 |                     <input class="slider signed" id="p_freq_ramp" data-title="Slide" />
730 |                     <input class="slider signed" id="p_freq_dramp" data-title="Delta slide" />
731 |                 </fieldset>
732 |                 <fieldset>
733 |                     <legend>Vibrato</legend>
734 |                     <input class="slider" id="p_vib_strength" data-title="Depth" />
735 |                     <input class="slider" id="p_vib_speed" data-title="Speed" />
736 |                 </fieldset>
737 |                 <fieldset>
738 |                     <legend>Arpeggiation</legend>
739 |                     <input class="slider signed" id="p_arp_mod" data-title="Frequency mult" />
740 |                     <input class="slider" id="p_arp_speed" data-title="Change speed" />
741 |                 </fieldset>
742 |                 <fieldset>
743 |                     <legend>Duty Cycle</legend>
744 |                     <input class="slider" id="p_duty" data-title="Duty cycle" />
745 |                     <input class="slider signed" id="p_duty_ramp" data-title="Sweep" />
746 |                 </fieldset>
747 |                 <fieldset>
748 |                     <legend>Retrigger</legend>
749 |                     <input class="slider" id="p_repeat_speed" data-title="Rate" />
750 |                 </fieldset>
751 |                 <fieldset>
752 |                     <legend>Flanger</legend>
753 |                     <input class="slider signed" id="p_pha_offset" data-title="Offset" />
754 |                     <input class="slider signed" id="p_pha_ramp" data-title="Sweep" />
755 |                 </fieldset>
756 |                 <fieldset>
757 |                     <legend>Low-Pass Filter</legend>
758 |                     <input class="slider" id="p_lpf_freq" data-title="Cutoff frequency" />
759 | 
760 |                     <input class="slider signed" id="p_lpf_ramp" data-title="Cutoff sweep" />
761 |                     <input class="slider" id="p_lpf_resonance" data-title="Resonance" />
762 |                 </fieldset>
763 |                 <fieldset>
764 |                     <legend>High-Pass Filter</legend>
765 |                     <input class="slider" id="p_hpf_freq" data-title="Cutoff frequency" />
766 |                     <input class="slider signed" id="p_hpf_ramp" data-title="Cutoff sweep" />
767 |                 </fieldset>
768 |             </div>
769 |         </div>
770 | 
771 |         <div id="export">
772 |             <h2>Sound</h2>
773 |             <button class="play-button" onclick="play(true)">Play</button>
774 | 
775 |             <p id="soundexport">
776 |                 Download:</br>
777 |                 <a id="wav">sfx.wav</a>
778 |                 <br /><br />
779 |                 Save As:</br>
780 |                 <a id="json">sfx.json</a>
781 |             </p>
782 | 
783 |             <table id="stats">
784 |                 <tr>
785 |                     <th>File size:</th>
786 |                     <td id="file_size"></td>
787 |                 </tr>
788 |                 <tr>
789 |                     <th>Samples:</th>
790 |                     <td id="num_samples"></td>
791 |                 </tr>
792 |                 <tr>
793 |                     <th>Clipped:</th>
794 |                     <td id="clipping"></td>
795 |                 </tr>
796 |             </table>
797 | 
798 |             <p>
799 |                 <input class="slider" id="sound_vol" data-title="Gain" data-position="after" />
800 |             </p>
801 | 
802 |             <label for="hz">Sample Rate (Hz)</label>
803 |             <br />
804 |             <div id="hz" class="buttonset">
805 |                 <input type="radio" id="44100" value=44100 name="hz" checked="checked" />
806 |                 <label for="44100">44k</label>
807 |                 <input type="radio" id="22050" value=22050 name="hz" />
808 |                 <label for="22050">22k</label>
809 |                 <input type="radio" id="11025" value=11025 name="hz" />
810 |                 <label for="11025">11k</label>
811 |                 <input type="radio" id="8000" value=8000 name="hz" />
812 |                 <label for="8000">8k</label>
813 |             </div>
814 | 
815 |             <br />
816 |             <label for="bits">Sample size</label>
817 |             <br />
818 |             <div id="bits" class="buttonset">
819 |                 <input type="radio" id="16" value=16 name="bits" />
820 |                 <label for="16">16 bit</label>
821 |                 <input type="radio" id="8" value=8 name="bits" checked="checked" />
822 |                 <label for="8">8 bit</label>
823 |             </div>
824 | 
825 |             <p><a id="share">🔗 permalink</a></p>
826 |             <p><button onclick="copy()">Copy code</button></p>
827 |             <p><canvas id="waveform" width="100" style="width:100%"></canvas></p>
828 |         </div>
829 |     </main>
830 | 
831 |     <div id="data">
832 |         <button onclick="serialize_params();"> ▼ Serialize</button>
833 |         <button onclick="deserialize_params()"> ▲ Deserialize</button>
834 |         <button onclick="upload_params_from_file()"> ⇧ Open Save</button>
835 |         <input type="file" id="open_save_impl" accept="application/JSON" style="display:none" />
836 |         <div id="serialize">
837 |             <textarea></textarea>
838 |             <button onclick="copyText(textarea)">Copy</button>
839 |             <button onclick="document.getElementById('serialize').style.display='none'">Hide ✕</button>
840 |         </div>
841 |     </div>
842 | 
843 |     <div id="links">
844 |         <h1>about jsfxr</h1>
845 |         <p>Jsfxr is an online 8 bit sound maker and sfx generator. All you need to make retro sound effects with jsfxr
846 |             is a
847 |             web browser. It's a JavaScript port of the original <a href="http://www.drpetter.se/project_sfxr.html"
848 |                 id="original">sfxr</a> by DrPetter. You can also use it as a <a
849 |                 href='https://github.com/chr15m/jsfxr#use'>JavaScript library</a> for playing and rendering sfxr sound
850 |             effects
851 |             in your games.</p>
852 |         <br />
853 |         (Port of <a href="http://www.drpetter.se/project_sfxr.html" id="original">sfxr</a> by DrPetter)<br />
854 |         <a id="uncopy" href="UNLICENSE">¢</a> 2011
855 |         <a href="http://fredricksen.net/">Eric Fredricksen</a><br />
856 |         With <a href='https://github.com/chr15m/jsfxr'>contributions</a> from Chris McCormick<br />
857 |         <br />
858 |         <a href="https://github.com/chr15m/jsfxr" id="source">(Source code)</a>
859 |         <br />
860 |         <p><a href='https://github.com/chr15m/jsfxr#use'>See the documentation for using these sounds in your JavaScript
861 |                 game</a>.</p>
862 |         <p>Tip: use the <code>sfxr-to-wav</code> nodejs script to convert to a wave file on the command line.</p>
863 |     </div>
864 | 
865 | </body>
866 | </html>
867 | 


--------------------------------------------------------------------------------
/sfxr.js:
--------------------------------------------------------------------------------
   1 | // Wave shapes
   2 | var SQUARE = 0;
   3 | var SAWTOOTH = 1;
   4 | var SINE = 2;
   5 | var NOISE = 3;
   6 | 
   7 | // Playback volume
   8 | var masterVolume = 1;
   9 | 
  10 | var OVERSAMPLING = 8;
  11 | 
  12 | /*** Core data structure ***/
  13 | 
  14 | // Sound generation parameters are on [0,1] unless noted SIGNED & thus
  15 | // on [-1,1]
  16 | function Params() {
  17 |   this.oldParams = true;  // Note what structure this is
  18 | 
  19 |   // Wave shape
  20 |   this.wave_type = SQUARE;
  21 | 
  22 |   // Envelope
  23 |   this.p_env_attack = 0;   // Attack time
  24 |   this.p_env_sustain = 0.3;  // Sustain time
  25 |   this.p_env_punch = 0;    // Sustain punch
  26 |   this.p_env_decay = 0.4;    // Decay time
  27 | 
  28 |   // Tone
  29 |   this.p_base_freq = 0.3;    // Start frequency
  30 |   this.p_freq_limit = 0;   // Min frequency cutoff
  31 |   this.p_freq_ramp = 0;    // Slide (SIGNED)
  32 |   this.p_freq_dramp = 0;   // Delta slide (SIGNED)
  33 |   // Vibrato
  34 |   this.p_vib_strength = 0; // Vibrato depth
  35 |   this.p_vib_speed = 0;    // Vibrato speed
  36 | 
  37 |   // Tonal change
  38 |   this.p_arp_mod = 0;      // Change amount (SIGNED)
  39 |   this.p_arp_speed = 0;    // Change speed
  40 | 
  41 |   // Square wave duty (proportion of time signal is high vs. low)
  42 |   this.p_duty = 0;         // Square duty
  43 |   this.p_duty_ramp = 0;    // Duty sweep (SIGNED)
  44 | 
  45 |   // Repeat
  46 |   this.p_repeat_speed = 0; // Repeat speed
  47 | 
  48 |   // Flanger
  49 |   this.p_pha_offset = 0;   // Flanger offset (SIGNED)
  50 |   this.p_pha_ramp = 0;     // Flanger sweep (SIGNED)
  51 | 
  52 |   // Low-pass filter
  53 |   this.p_lpf_freq = 1;     // Low-pass filter cutoff
  54 |   this.p_lpf_ramp = 0;     // Low-pass filter cutoff sweep (SIGNED)
  55 |   this.p_lpf_resonance = 0;// Low-pass filter resonance
  56 |   // High-pass filter
  57 |   this.p_hpf_freq = 0;     // High-pass filter cutoff
  58 |   this.p_hpf_ramp = 0;     // High-pass filter cutoff sweep (SIGNED)
  59 | 
  60 |   // Sample parameters
  61 |   this.sound_vol = 0.5;
  62 |   this.sample_rate = 44100;
  63 |   this.sample_size = 8;
  64 | }
  65 | 
  66 | /*** Helper functions ***/
  67 | 
  68 | function sqr(x) { return x * x }
  69 | function cube(x) { return x * x * x }
  70 | function sign(x) { return x < 0 ? -1 : 1 }
  71 | function log(x, b) { return Math.log(x) / Math.log(b); }
  72 | var pow = Math.pow;
  73 | 
  74 | function frnd(range) {
  75 |   return Math.random() * range;
  76 | }
  77 | 
  78 | function rndr(from, to) {
  79 |   return Math.random() * (to - from) + from;
  80 | }
  81 | 
  82 | function rnd(max) {
  83 |   return Math.floor(Math.random() * (max + 1));
  84 | }
  85 | 
  86 | /*** Import/export functions ***/
  87 | 
  88 | // http://stackoverflow.com/questions/3096646/how-to-convert-a-floating-point-number-to-its-binary-representation-ieee-754-i
  89 | function assembleFloat(sign, exponent, mantissa)
  90 | {
  91 |     return (sign << 31) | (exponent << 23) | (mantissa);
  92 | }
  93 | 
  94 | function floatToNumber(flt)
  95 | {
  96 |     if (isNaN(flt)) // Special case: NaN
  97 |         return assembleFloat(0, 0xFF, 0x1337); // Mantissa is nonzero for NaN
  98 | 
  99 |     var sign = (flt < 0) ? 1 : 0;
 100 |     flt = Math.abs(flt);
 101 |     if (flt == 0.0) // Special case: +-0
 102 |         return assembleFloat(sign, 0, 0);
 103 | 
 104 |     var exponent = Math.floor(Math.log(flt) / Math.LN2);
 105 |     if (exponent > 127 || exponent < -126) // Special case: +-Infinity (and huge numbers)
 106 |         return assembleFloat(sign, 0xFF, 0); // Mantissa is zero for +-Infinity
 107 | 
 108 |     var mantissa = flt / Math.pow(2, exponent);
 109 |     return assembleFloat(sign, exponent + 127, (mantissa * Math.pow(2, 23)) & 0x7FFFFF);
 110 | }
 111 | 
 112 | // http://stackoverflow.com/a/16001019
 113 | function numberToFloat(bytes) {
 114 |     var sign = (bytes & 0x80000000) ? -1 : 1;
 115 |     var exponent = ((bytes >> 23) & 0xFF) - 127;
 116 |     var significand = (bytes & ~(-1 << 23));
 117 | 
 118 |     if (exponent == 128) 
 119 |         return sign * ((significand) ? Number.NaN : Number.POSITIVE_INFINITY);
 120 | 
 121 |     if (exponent == -127) {
 122 |         if (significand == 0) return sign * 0.0;
 123 |         exponent = -126;
 124 |         significand /= (1 << 22);
 125 |     } else significand = (significand | (1 << 23)) / (1 << 23);
 126 | 
 127 |     return sign * significand * Math.pow(2, exponent);
 128 | }
 129 | 
 130 | // export parameter list to URL friendly base58 string
 131 | // https://gist.github.com/diafygi/90a3e80ca1c2793220e5/
 132 | var b58alphabet = "123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz";
 133 | var params_order = [
 134 |   "wave_type",
 135 |   "p_env_attack",
 136 |   "p_env_sustain",
 137 |   "p_env_punch",
 138 |   "p_env_decay",
 139 |   "p_base_freq",
 140 |   "p_freq_limit",
 141 |   "p_freq_ramp",
 142 |   "p_freq_dramp",
 143 |   "p_vib_strength",
 144 |   "p_vib_speed",
 145 |   "p_arp_mod",
 146 |   "p_arp_speed",
 147 |   "p_duty",
 148 |   "p_duty_ramp",
 149 |   "p_repeat_speed",
 150 |   "p_pha_offset",
 151 |   "p_pha_ramp",
 152 |   "p_lpf_freq",
 153 |   "p_lpf_ramp",
 154 |   "p_lpf_resonance",
 155 |   "p_hpf_freq",
 156 |   "p_hpf_ramp"
 157 | ];
 158 | 
 159 | var params_signed = ["p_freq_ramp", "p_freq_dramp", "p_arp_mod", "p_duty_ramp", "p_pha_offset", "p_pha_ramp", "p_lpf_ramp", "p_hpf_ramp"];
 160 | 
 161 | Params.prototype.toB58 = function() {
 162 |   var convert = [];
 163 |   for (var pi in params_order) {
 164 |     var p = params_order[pi];
 165 |     if (p == "wave_type") {
 166 |       convert.push(this[p]);
 167 |     } else if (p.indexOf("p_") == 0) {
 168 |       var val = this[p];
 169 |       val = floatToNumber(val);
 170 |       convert.push(0xff & val);
 171 |       convert.push(0xff & (val >> 8))
 172 |       convert.push(0xff & (val >> 16))
 173 |       convert.push(0xff & (val >> 24))
 174 |     }
 175 |   }
 176 |   return function(B,A){var d=[],s="",i,j,c,n;for(i in B){j=0,c=B[i];s+=c||s.length^i?"":1;while(j in d||c){n=d[j];n=n?n*256+c:c;c=n/58|0;d[j]=n%58;j++}}while(j--)s+=A[d[j]];return s}(convert, b58alphabet);
 177 | }
 178 | 
 179 | Params.prototype.fromB58 = function(b58encoded) {
 180 |   this.fromJSON(sfxr.b58decode(b58encoded));
 181 |   return this;
 182 | }
 183 | 
 184 | Params.prototype.fromJSON = function(struct) {
 185 |   for (var p in struct) {
 186 |     if (struct.hasOwnProperty(p)) {
 187 |       this[p] = struct[p];
 188 |     }
 189 |   }
 190 |   return this;
 191 | }
 192 | 
 193 | /*** Presets ***/
 194 | 
 195 | // These functions roll up random sounds appropriate to various
 196 | // typical game events:
 197 | 
 198 | Params.prototype.pickupCoin = function () {
 199 |   this.wave_type = SAWTOOTH;
 200 |   this.p_base_freq = 0.4 + frnd(0.5);
 201 |   this.p_env_attack = 0;
 202 |   this.p_env_sustain = frnd(0.1);
 203 |   this.p_env_decay = 0.1 + frnd(0.4);
 204 |   this.p_env_punch = 0.3 + frnd(0.3);
 205 |   if (rnd(1)) {
 206 |     this.p_arp_speed = 0.5 + frnd(0.2);
 207 |     this.p_arp_mod = 0.2 + frnd(0.4);
 208 |   }
 209 |   return this;
 210 | }
 211 | 
 212 | Params.prototype.laserShoot = function () {
 213 |   this.wave_type = rnd(2);
 214 |   if(this.wave_type === SINE && rnd(1))
 215 |     this.wave_type = rnd(1);
 216 |   if (rnd(2) === 0) {
 217 |     this.p_base_freq = 0.3 + frnd(0.6);
 218 |     this.p_freq_limit = frnd(0.1);
 219 |     this.p_freq_ramp = -0.35 - frnd(0.3);
 220 |   } else {
 221 |     this.p_base_freq = 0.5 + frnd(0.5);
 222 |     this.p_freq_limit = this.p_base_freq - 0.2 - frnd(0.6);
 223 |     if (this.p_freq_limit < 0.2) this.p_freq_limit = 0.2;
 224 |     this.p_freq_ramp = -0.15 - frnd(0.2);
 225 |   }
 226 |   if (this.wave_type === SAWTOOTH)
 227 |     this.p_duty = 1;
 228 |   if (rnd(1)) {
 229 |     this.p_duty = frnd(0.5);
 230 |     this.p_duty_ramp = frnd(0.2);
 231 |   } else {
 232 |     this.p_duty = 0.4 + frnd(0.5);
 233 |     this.p_duty_ramp = -frnd(0.7);
 234 |   }
 235 |   this.p_env_attack = 0;
 236 |   this.p_env_sustain = 0.1 + frnd(0.2);
 237 |   this.p_env_decay = frnd(0.4);
 238 |   if (rnd(1))
 239 |     this.p_env_punch = frnd(0.3);
 240 |   if (rnd(2) === 0) {
 241 |     this.p_pha_offset = frnd(0.2);
 242 |     this.p_pha_ramp = -frnd(0.2);
 243 |   }
 244 |   //if (rnd(1))
 245 |     this.p_hpf_freq = frnd(0.3);
 246 | 
 247 |   return this;
 248 | }
 249 | 
 250 | Params.prototype.explosion = function () {
 251 |   this.wave_type = NOISE;
 252 |   if (rnd(1)) {
 253 |     this.p_base_freq = sqr(0.1 + frnd(0.4));
 254 |     this.p_freq_ramp = -0.1 + frnd(0.4);
 255 |   } else {
 256 |     this.p_base_freq = sqr(0.2 + frnd(0.7));
 257 |     this.p_freq_ramp = -0.2 - frnd(0.2);
 258 |   }
 259 |   if (rnd(4) === 0)
 260 |     this.p_freq_ramp = 0;
 261 |   if (rnd(2) === 0)
 262 |     this.p_repeat_speed = 0.3 + frnd(0.5);
 263 |   this.p_env_attack = 0;
 264 |   this.p_env_sustain = 0.1 + frnd(0.3);
 265 |   this.p_env_decay = frnd(0.5);
 266 |   if (rnd(1)) {
 267 |     this.p_pha_offset = -0.3 + frnd(0.9);
 268 |     this.p_pha_ramp = -frnd(0.3);
 269 |   }
 270 |   this.p_env_punch = 0.2 + frnd(0.6);
 271 |   if (rnd(1)) {
 272 |     this.p_vib_strength = frnd(0.7);
 273 |     this.p_vib_speed = frnd(0.6);
 274 |   }
 275 |   if (rnd(2) === 0) {
 276 |     this.p_arp_speed = 0.6 + frnd(0.3);
 277 |     this.p_arp_mod = 0.8 - frnd(1.6);
 278 |   }
 279 | 
 280 |   return this;
 281 | }
 282 | 
 283 | Params.prototype.powerUp = function () {
 284 |   if (rnd(1)) {
 285 |     this.wave_type = SAWTOOTH;
 286 |     this.p_duty = 1;
 287 |   } else {
 288 |     this.p_duty = frnd(0.6);
 289 |   }
 290 |   this.p_base_freq = 0.2 + frnd(0.3);
 291 |   if (rnd(1)) {
 292 |     this.p_freq_ramp = 0.1 + frnd(0.4);
 293 |     this.p_repeat_speed = 0.4 + frnd(0.4);
 294 |   } else {
 295 |     this.p_freq_ramp = 0.05 + frnd(0.2);
 296 |     if (rnd(1)) {
 297 |       this.p_vib_strength = frnd(0.7);
 298 |       this.p_vib_speed = frnd(0.6);
 299 |     }
 300 |   }
 301 |   this.p_env_attack = 0;
 302 |   this.p_env_sustain = frnd(0.4);
 303 |   this.p_env_decay = 0.1 + frnd(0.4);
 304 | 
 305 |   return this;
 306 | }
 307 | 
 308 | Params.prototype.hitHurt = function () {
 309 |   this.wave_type = rnd(2);
 310 |   if (this.wave_type === SINE)
 311 |     this.wave_type = NOISE;
 312 |   if (this.wave_type === SQUARE)
 313 |     this.p_duty = frnd(0.6);
 314 |   if (this.wave_type === SAWTOOTH)
 315 |     this.p_duty = 1;
 316 |   this.p_base_freq = 0.2 + frnd(0.6);
 317 |   this.p_freq_ramp = -0.3 - frnd(0.4);
 318 |   this.p_env_attack = 0;
 319 |   this.p_env_sustain = frnd(0.1);
 320 |   this.p_env_decay = 0.1 + frnd(0.2);
 321 |   if (rnd(1))
 322 |     this.p_hpf_freq = frnd(0.3);
 323 |   return this;
 324 | }
 325 | 
 326 | Params.prototype.jump = function () {
 327 |   this.wave_type = SQUARE;
 328 |   this.p_duty = frnd(0.6);
 329 |   this.p_base_freq = 0.3 + frnd(0.3);
 330 |   this.p_freq_ramp = 0.1 + frnd(0.2);
 331 |   this.p_env_attack = 0;
 332 |   this.p_env_sustain = 0.1 + frnd(0.3);
 333 |   this.p_env_decay = 0.1 + frnd(0.2);
 334 |   if (rnd(1))
 335 |     this.p_hpf_freq = frnd(0.3);
 336 |   if (rnd(1))
 337 |     this.p_lpf_freq = 1 - frnd(0.6);
 338 |   return this;
 339 | }
 340 | 
 341 | Params.prototype.blipSelect = function () {
 342 |   this.wave_type = rnd(1);
 343 |   if (this.wave_type === SQUARE)
 344 |     this.p_duty = frnd(0.6);
 345 |   else
 346 |     this.p_duty = 1;
 347 |   this.p_base_freq = 0.2 + frnd(0.4);
 348 |   this.p_env_attack = 0;
 349 |   this.p_env_sustain = 0.1 + frnd(0.1);
 350 |   this.p_env_decay = frnd(0.2);
 351 |   this.p_hpf_freq = 0.1;
 352 |   return this;
 353 | }
 354 | 
 355 | Params.prototype.synth = function () {
 356 |   this.wave_type = rnd(1);
 357 |   this.p_base_freq = [0.2723171360931539, 0.19255692561524382, 0.13615778746815113][rnd(2)];
 358 |   this.p_env_attack = rnd(4) > 3 ? frnd(0.5) : 0;
 359 |   this.p_env_sustain = frnd(1);
 360 |   this.p_env_punch = frnd(1);
 361 |   this.p_env_decay = frnd(0.9) + 0.1;
 362 |   this.p_arp_mod = [0, 0, 0, 0, -0.3162, 0.7454, 0.7454][rnd(6)];
 363 |   this.p_arp_speed = frnd(0.5) + 0.4;
 364 |   this.p_duty = frnd(1);
 365 |   this.p_duty_ramp = rnd(2) == 2 ? frnd(1) : 0;
 366 |   this.p_lpf_freq = [1, 0.9 * frnd(1) * frnd(1) + 0.1][rnd(1)];
 367 |   this.p_lpf_ramp = rndr(-1, 1);
 368 |   this.p_lpf_resonance = frnd(1);
 369 |   this.p_hpf_freq = rnd(3) == 3 ? frnd(1) : 0;
 370 |   this.p_hpf_ramp = rnd(3) == 3 ? frnd(1) : 0;
 371 |   return this;
 372 | }
 373 | 
 374 | Params.prototype.tone = function () {
 375 |   this.wave_type = SINE;
 376 |   this.p_base_freq = 0.35173364; // 440 Hz
 377 |   this.p_env_attack = 0;
 378 |   this.p_env_sustain = 0.6641; // 1 sec
 379 |   this.p_env_decay = 0;
 380 |   this.p_env_punch = 0;
 381 |   return this;
 382 | }
 383 | 
 384 | Params.prototype.click = function() {
 385 |   const base = ["explosion", "hitHurt"][rnd(1)];
 386 |   this[base]();
 387 |   if (rnd(1)) {
 388 |     this.p_freq_ramp = -0.5 + frnd(1.0);
 389 |   }
 390 |   if (rnd(1)) {
 391 |     this.p_env_sustain = (frnd(0.4) + 0.2) * this.p_env_sustain;
 392 |     this.p_env_decay = (frnd(0.4) + 0.2) * this.p_env_decay;
 393 |   }
 394 |   if (rnd(3) == 0) {
 395 |     this.p_env_attack = frnd(0.3);
 396 |   }
 397 |   this.p_base_freq = 1 - frnd(0.25);
 398 |   this.p_hpf_freq = 1 - frnd(0.1);
 399 |   return this;
 400 | }
 401 | 
 402 | Params.prototype.random = function () {
 403 |   this.wave_type = rnd(3);
 404 |   if (rnd(1))
 405 |     this.p_base_freq = cube(frnd(2) - 1) + 0.5;
 406 |   else
 407 |     this.p_base_freq = sqr(frnd(1));
 408 |   this.p_freq_limit = 0;
 409 |   this.p_freq_ramp = Math.pow(frnd(2) - 1, 5);
 410 |   if (this.p_base_freq > 0.7 && this.p_freq_ramp > 0.2)
 411 |     this.p_freq_ramp = -this.p_freq_ramp;
 412 |   if (this.p_base_freq < 0.2 && this.p_freq_ramp < -0.05)
 413 |     this.p_freq_ramp = -this.p_freq_ramp;
 414 |   this.p_freq_dramp = Math.pow(frnd(2) - 1, 3);
 415 |   this.p_duty = frnd(2) - 1;
 416 |   this.p_duty_ramp = Math.pow(frnd(2) - 1, 3);
 417 |   this.p_vib_strength = Math.pow(frnd(2) - 1, 3);
 418 |   this.p_vib_speed = rndr(-1, 1);
 419 |   this.p_env_attack = cube(rndr(-1, 1));
 420 |   this.p_env_sustain = sqr(rndr(-1, 1));
 421 |   this.p_env_decay = rndr(-1, 1);
 422 |   this.p_env_punch = Math.pow(frnd(0.8), 2);
 423 |   if (this.p_env_attack + this.p_env_sustain + this.p_env_decay < 0.2) {
 424 |     this.p_env_sustain += 0.2 + frnd(0.3);
 425 |     this.p_env_decay += 0.2 + frnd(0.3);
 426 |   }
 427 |   this.p_lpf_resonance = rndr(-1, 1);
 428 |   this.p_lpf_freq = 1 - Math.pow(frnd(1), 3);
 429 |   this.p_lpf_ramp = Math.pow(frnd(2) - 1, 3);
 430 |   if (this.p_lpf_freq < 0.1 && this.p_lpf_ramp < -0.05)
 431 |     this.p_lpf_ramp = -this.p_lpf_ramp;
 432 |   this.p_hpf_freq = Math.pow(frnd(1), 5);
 433 |   this.p_hpf_ramp = Math.pow(frnd(2) - 1, 5);
 434 |   this.p_pha_offset = Math.pow(frnd(2) - 1, 3);
 435 |   this.p_pha_ramp = Math.pow(frnd(2) - 1, 3);
 436 |   this.p_repeat_speed = frnd(2) - 1;
 437 |   this.p_arp_speed = frnd(2) - 1;
 438 |   this.p_arp_mod = frnd(2) - 1;
 439 |   return this;
 440 | }
 441 | 
 442 | Params.prototype.mutate = function () {
 443 |   if (rnd(1)) this.p_base_freq += frnd(0.1) - 0.05;
 444 |   if (rnd(1)) this.p_freq_ramp += frnd(0.1) - 0.05;
 445 |   if (rnd(1)) this.p_freq_dramp += frnd(0.1) - 0.05;
 446 |   if (rnd(1)) this.p_duty += frnd(0.1) - 0.05;
 447 |   if (rnd(1)) this.p_duty_ramp += frnd(0.1) - 0.05;
 448 |   if (rnd(1)) this.p_vib_strength += frnd(0.1) - 0.05;
 449 |   if (rnd(1)) this.p_vib_speed += frnd(0.1) - 0.05;
 450 |   if (rnd(1)) this.p_vib_delay += frnd(0.1) - 0.05;
 451 |   if (rnd(1)) this.p_env_attack += frnd(0.1) - 0.05;
 452 |   if (rnd(1)) this.p_env_sustain += frnd(0.1) - 0.05;
 453 |   if (rnd(1)) this.p_env_decay += frnd(0.1) - 0.05;
 454 |   if (rnd(1)) this.p_env_punch += frnd(0.1) - 0.05;
 455 |   if (rnd(1)) this.p_lpf_resonance += frnd(0.1) - 0.05;
 456 |   if (rnd(1)) this.p_lpf_freq += frnd(0.1) - 0.05;
 457 |   if (rnd(1)) this.p_lpf_ramp += frnd(0.1) - 0.05;
 458 |   if (rnd(1)) this.p_hpf_freq += frnd(0.1) - 0.05;
 459 |   if (rnd(1)) this.p_hpf_ramp += frnd(0.1) - 0.05;
 460 |   if (rnd(1)) this.p_pha_offset += frnd(0.1) - 0.05;
 461 |   if (rnd(1)) this.p_pha_ramp += frnd(0.1) - 0.05;
 462 |   if (rnd(1)) this.p_repeat_speed += frnd(0.1) - 0.05;
 463 |   if (rnd(1)) this.p_arp_speed += frnd(0.1) - 0.05;
 464 |   if (rnd(1)) this.p_arp_mod += frnd(0.1) - 0.05;
 465 |   return this;
 466 | }
 467 | 
 468 | /*** Simpler namespaced functional API ***/
 469 | 
 470 | sfxr = {};
 471 | 
 472 | sfxr.toBuffer = function(synthdef) {
 473 |   return (new SoundEffect(synthdef)).getRawBuffer()["buffer"];
 474 | };
 475 | 
 476 | sfxr.toWebAudio = function(synthdef, audiocontext) {
 477 |   var sfx = new SoundEffect(synthdef);
 478 |   var buffer = sfx.getRawBuffer()["normalized"];
 479 |   if (audiocontext) {
 480 |     var buff = audiocontext.createBuffer(1, buffer.length, sfx.sampleRate);
 481 |     var nowBuffering = buff.getChannelData(0);
 482 |     for (var i = 0; i < buffer.length; i++) {
 483 |       nowBuffering[i] = buffer[i];
 484 |     }
 485 |     var proc = audiocontext.createBufferSource();
 486 |     proc.buffer = buff;
 487 |     return proc;
 488 |   }
 489 | };
 490 | 
 491 | sfxr.toWave = function(synthdef) {
 492 |   return (new SoundEffect(synthdef)).generate();
 493 | };
 494 | 
 495 | sfxr.toAudio = function(synthdef) {
 496 |   return sfxr.toWave(synthdef).getAudio();
 497 | }
 498 | 
 499 | sfxr.play = function(synthdef) {
 500 |   return sfxr.toAudio(synthdef).play();
 501 | }
 502 | 
 503 | sfxr.b58decode = function(b58encoded) {
 504 |   var decoded = function(S,A){var d=[],b=[],i,j,c,n;for(i in S){j=0,c=A.indexOf(S[i]);if(c<0)return undefined;c||b.length^i?i:b.push(0);while(j in d||c){n=d[j];n=n?n*58+c:c;c=n>>8;d[j]=n%256;j++}}while(j--)b.push(d[j]);return new Uint8Array(b)}(b58encoded,b58alphabet);
 505 |   var result = {};
 506 |   for (var pi in params_order) {
 507 |     var p = params_order[pi];
 508 |     var offset = (pi - 1) * 4 + 1;
 509 |     if (p == "wave_type") {
 510 |       result[p] = decoded[0];
 511 |     } else {
 512 |       var val = (decoded[offset] | (decoded[offset + 1] << 8) | (decoded[offset + 2] << 16) | (decoded[offset + 3] << 24));
 513 |       result[p] = numberToFloat(val);
 514 |     }
 515 |   }
 516 |   return result;
 517 | }
 518 | 
 519 | sfxr.b58encode = function(synthdef) {
 520 |   var p = new Params();
 521 |   p.fromJSON(synthdef);
 522 |   return p.toB58();
 523 | }
 524 | 
 525 | sfxr.generate = function(algorithm, options) {
 526 |   const p = new Params();
 527 |   const opts = options || {};
 528 |   p.sound_vol = opts["sound_vol"] || 0.25;
 529 |   p.sample_rate = opts["sample_rate"] || 44100;
 530 |   p.sample_size = opts["sample_size"] || 8;
 531 |   return p[algorithm]();
 532 | }
 533 | 
 534 | /*** Main entry point ***/
 535 | 
 536 | function SoundEffect(ps) {
 537 |   if (typeof(ps) == "string") {
 538 |     var PARAMS = new Params();
 539 |     if (ps.indexOf("#") == 0) {
 540 |       ps = ps.slice(1);
 541 |     }
 542 |     ps = PARAMS.fromB58(ps);
 543 |   }
 544 |   this.init(ps);
 545 | }
 546 | 
 547 | SoundEffect.prototype.init = function (ps) {
 548 |   this.parameters = ps;
 549 |   this.initForRepeat();  // First time through, this is a bit of a misnomer
 550 | 
 551 |   // Waveform shape
 552 |   this.waveShape = parseInt(ps.wave_type);
 553 | 
 554 |   // Filter
 555 |   this.fltw = Math.pow(ps.p_lpf_freq, 3) * 0.1;
 556 |   this.enableLowPassFilter = (ps.p_lpf_freq != 1);
 557 |   this.fltw_d = 1 + ps.p_lpf_ramp * 0.0001;
 558 |   this.fltdmp = 5 / (1 + Math.pow(ps.p_lpf_resonance, 2) * 20) *
 559 |     (0.01 + this.fltw);
 560 |   if (this.fltdmp > 0.8) this.fltdmp=0.8;
 561 |   this.flthp = Math.pow(ps.p_hpf_freq, 2) * 0.1;
 562 |   this.flthp_d = 1 + ps.p_hpf_ramp * 0.0003;
 563 | 
 564 |   // Vibrato
 565 |   this.vibratoSpeed = Math.pow(ps.p_vib_speed, 2) * 0.01;
 566 |   this.vibratoAmplitude = ps.p_vib_strength * 0.5;
 567 | 
 568 |   // Envelope
 569 |   this.envelopeLength = [
 570 |     Math.floor(ps.p_env_attack * ps.p_env_attack * 100000),
 571 |     Math.floor(ps.p_env_sustain * ps.p_env_sustain * 100000),
 572 |     Math.floor(ps.p_env_decay * ps.p_env_decay * 100000)
 573 |   ];
 574 |   this.envelopePunch = ps.p_env_punch;
 575 | 
 576 |   // Flanger
 577 |   this.flangerOffset = Math.pow(ps.p_pha_offset, 2) * 1020;
 578 |   if (ps.p_pha_offset < 0) this.flangerOffset = -this.flangerOffset;
 579 |   this.flangerOffsetSlide = Math.pow(ps.p_pha_ramp, 2) * 1;
 580 |   if (ps.p_pha_ramp < 0) this.flangerOffsetSlide = -this.flangerOffsetSlide;
 581 | 
 582 |   // Repeat
 583 |   this.repeatTime = Math.floor(Math.pow(1 - ps.p_repeat_speed, 2) * 20000
 584 |                                + 32);
 585 |   if (ps.p_repeat_speed === 0)
 586 |     this.repeatTime = 0;
 587 | 
 588 |   this.gain = Math.exp(ps.sound_vol) - 1;
 589 | 
 590 |   this.sampleRate = ps.sample_rate;
 591 |   this.bitsPerChannel = ps.sample_size;
 592 | }
 593 | 
 594 | SoundEffect.prototype.initForRepeat = function() {
 595 |   var ps = this.parameters;
 596 |   this.elapsedSinceRepeat = 0;
 597 | 
 598 |   this.period = 100 / (ps.p_base_freq * ps.p_base_freq + 0.001);
 599 |   this.periodMax = 100 / (ps.p_freq_limit * ps.p_freq_limit + 0.001);
 600 |   this.enableFrequencyCutoff = (ps.p_freq_limit > 0);
 601 |   this.periodMult = 1 - Math.pow(ps.p_freq_ramp, 3) * 0.01;
 602 |   this.periodMultSlide = -Math.pow(ps.p_freq_dramp, 3) * 0.000001;
 603 | 
 604 |   this.dutyCycle = 0.5 - ps.p_duty * 0.5;
 605 |   this.dutyCycleSlide = -ps.p_duty_ramp * 0.00005;
 606 | 
 607 |   if (ps.p_arp_mod >= 0)
 608 |     this.arpeggioMultiplier = 1 - Math.pow(ps.p_arp_mod, 2) * .9;
 609 |   else
 610 |     this.arpeggioMultiplier = 1 + Math.pow(ps.p_arp_mod, 2) * 10;
 611 |   this.arpeggioTime = Math.floor(Math.pow(1 - ps.p_arp_speed, 2) * 20000 + 32);
 612 |   if (ps.p_arp_speed === 1)
 613 |     this.arpeggioTime = 0;
 614 | }
 615 | 
 616 | SoundEffect.prototype.getRawBuffer = function () {
 617 |   var fltp = 0;
 618 |   var fltdp = 0;
 619 |   var fltphp = 0;
 620 | 
 621 |   var noise_buffer = Array(32);
 622 |   for (var i = 0; i < 32; ++i)
 623 |     noise_buffer[i] = Math.random() * 2 - 1;
 624 | 
 625 |   var envelopeStage = 0;
 626 |   var envelopeElapsed = 0;
 627 | 
 628 |   var vibratoPhase = 0;
 629 | 
 630 |   var phase = 0;
 631 |   var ipp = 0;
 632 |   var flanger_buffer = Array(1024);
 633 |   for (var i = 0; i < 1024; ++i)
 634 |     flanger_buffer[i] = 0;
 635 | 
 636 |   var num_clipped = 0;
 637 | 
 638 |   var buffer = [];
 639 |   var normalized = [];
 640 | 
 641 |   var sample_sum = 0;
 642 |   var num_summed = 0;
 643 |   var summands = Math.floor(44100 / this.sampleRate);
 644 | 
 645 |   for(var t = 0; ; ++t) {
 646 | 
 647 |     // Repeats
 648 |     if (this.repeatTime != 0 && ++this.elapsedSinceRepeat >= this.repeatTime)
 649 |       this.initForRepeat();
 650 | 
 651 |     // Arpeggio (single)
 652 |     if(this.arpeggioTime != 0 && t >= this.arpeggioTime) {
 653 |       this.arpeggioTime = 0;
 654 |       this.period *= this.arpeggioMultiplier;
 655 |     }
 656 | 
 657 |     // Frequency slide, and frequency slide slide!
 658 |     this.periodMult += this.periodMultSlide;
 659 |     this.period *= this.periodMult;
 660 |     if(this.period > this.periodMax) {
 661 |       this.period = this.periodMax;
 662 |       if (this.enableFrequencyCutoff)
 663 |         break;
 664 |     }
 665 | 
 666 |     // Vibrato
 667 |     var rfperiod = this.period;
 668 |     if (this.vibratoAmplitude > 0) {
 669 |       vibratoPhase += this.vibratoSpeed;
 670 |       rfperiod = this.period * (1 + Math.sin(vibratoPhase) * this.vibratoAmplitude);
 671 |     }
 672 |     var iperiod = Math.floor(rfperiod);
 673 |     if (iperiod < OVERSAMPLING) iperiod = OVERSAMPLING;
 674 | 
 675 |     // Square wave duty cycle
 676 |     this.dutyCycle += this.dutyCycleSlide;
 677 |     if (this.dutyCycle < 0) this.dutyCycle = 0;
 678 |     if (this.dutyCycle > 0.5) this.dutyCycle = 0.5;
 679 | 
 680 |     // Volume envelope
 681 |     if (++envelopeElapsed > this.envelopeLength[envelopeStage]) {
 682 |       envelopeElapsed = 0;
 683 |       if (++envelopeStage > 2)
 684 |         break;
 685 |     }
 686 |     var env_vol;
 687 |     var envf = envelopeElapsed / this.envelopeLength[envelopeStage];
 688 |     if (envelopeStage === 0) {         // Attack
 689 |       env_vol = envf;
 690 |     } else if (envelopeStage === 1) {  // Sustain
 691 |       env_vol = 1 + (1 - envf) * 2 * this.envelopePunch;
 692 |     } else {                           // Decay
 693 |       env_vol = 1 - envf;
 694 |     }
 695 | 
 696 |     // Flanger step
 697 |     this.flangerOffset += this.flangerOffsetSlide;
 698 |     var iphase = Math.abs(Math.floor(this.flangerOffset));
 699 |     if (iphase > 1023) iphase = 1023;
 700 | 
 701 |     if (this.flthp_d != 0) {
 702 |       this.flthp *= this.flthp_d;
 703 |       if (this.flthp < 0.00001)
 704 |         this.flthp = 0.00001;
 705 |       if (this.flthp > 0.1)
 706 |         this.flthp = 0.1;
 707 |     }
 708 | 
 709 |     // 8x oversampling
 710 |     var sample = 0;
 711 |     for (var si = 0; si < OVERSAMPLING; ++si) {
 712 |       var sub_sample = 0;
 713 |       phase++;
 714 |       if (phase >= iperiod) {
 715 |         phase %= iperiod;
 716 |         if (this.waveShape === NOISE)
 717 |           for(var i = 0; i < 32; ++i)
 718 |             noise_buffer[i] = Math.random() * 2 - 1;
 719 |       }
 720 | 
 721 |       // Base waveform
 722 |       var fp = phase / iperiod;
 723 |       if (this.waveShape === SQUARE) {
 724 |         if (fp < this.dutyCycle)
 725 |           sub_sample=0.5;
 726 |         else
 727 |           sub_sample=-0.5;
 728 |       } else if (this.waveShape === SAWTOOTH) {
 729 |         if (fp < this.dutyCycle)
 730 |           sub_sample = -1 + 2 * fp/this.dutyCycle;
 731 |         else
 732 |           sub_sample = 1 - 2 * (fp-this.dutyCycle)/(1-this.dutyCycle);
 733 |       } else if (this.waveShape === SINE) {
 734 |         sub_sample = Math.sin(fp * 2 * Math.PI);
 735 |       } else if (this.waveShape === NOISE) {
 736 |         sub_sample = noise_buffer[Math.floor(phase * 32 / iperiod)];
 737 |       } else {
 738 |         throw "ERROR: Bad wave type: " + this.waveShape;
 739 |       }
 740 | 
 741 |       // Low-pass filter
 742 |       var pp = fltp;
 743 |       this.fltw *= this.fltw_d;
 744 |       if (this.fltw < 0) this.fltw = 0;
 745 |       if (this.fltw > 0.1) this.fltw = 0.1;
 746 |       if (this.enableLowPassFilter) {
 747 |         fltdp += (sub_sample - fltp) * this.fltw;
 748 |         fltdp -= fltdp * this.fltdmp;
 749 |       } else {
 750 |         fltp = sub_sample;
 751 |         fltdp = 0;
 752 |       }
 753 |       fltp += fltdp;
 754 | 
 755 |       // High-pass filter
 756 |       fltphp += fltp - pp;
 757 |       fltphp -= fltphp * this.flthp;
 758 |       sub_sample = fltphp;
 759 | 
 760 |       // Flanger
 761 |       flanger_buffer[ipp & 1023] = sub_sample;
 762 |       sub_sample += flanger_buffer[(ipp - iphase + 1024) & 1023];
 763 |       ipp = (ipp + 1) & 1023;
 764 | 
 765 |       // final accumulation and envelope application
 766 |       sample += sub_sample * env_vol;
 767 |     }
 768 | 
 769 |     // Accumulate samples appropriately for sample rate
 770 |     sample_sum += sample;
 771 |     if (++num_summed >= summands) {
 772 |       num_summed = 0;
 773 |       sample = sample_sum / summands;
 774 |       sample_sum = 0;
 775 |     } else {
 776 |       continue;
 777 |     }
 778 | 
 779 |     sample = sample / OVERSAMPLING * masterVolume;
 780 |     sample *= this.gain;
 781 | 
 782 |     // store the original normalized floating point sample
 783 |     normalized.push(sample);
 784 | 
 785 |     if (this.bitsPerChannel === 8) {
 786 |       // Rescale [-1, 1) to [0, 256)
 787 |       sample = Math.floor((sample + 1) * 128);
 788 |       if (sample > 255) {
 789 |         sample = 255;
 790 |         ++num_clipped;
 791 |       } else if (sample < 0) {
 792 |         sample = 0;
 793 |         ++num_clipped;
 794 |       }
 795 |       buffer.push(sample);
 796 |     } else {
 797 |       // Rescale [-1, 1) to [-32768, 32768)
 798 |       sample = Math.floor(sample * (1<<15));
 799 |       if (sample >= (1<<15)) {
 800 |         sample = (1 << 15)-1;
 801 |         ++num_clipped;
 802 |       } else if (sample < -(1<<15)) {
 803 |         sample = -(1 << 15);
 804 |         ++num_clipped;
 805 |       }
 806 |       buffer.push(sample & 0xFF);
 807 |       buffer.push((sample >> 8) & 0xFF);
 808 |     }
 809 |   }
 810 |   
 811 |   return {
 812 |     "buffer": buffer,
 813 |     "normalized": normalized,
 814 |     "clipped": num_clipped,
 815 |   }
 816 | }
 817 | 
 818 | SoundEffect.prototype.generate = function() {
 819 |   var rendered = this.getRawBuffer();
 820 |   var wave = new RIFFWAVE();
 821 |   wave.header.sampleRate = this.sampleRate;
 822 |   wave.header.bitsPerSample = this.bitsPerChannel;
 823 |   wave.Make(rendered.buffer);
 824 |   wave.clipping = rendered.clipped;
 825 |   wave.buffer = rendered.normalized;
 826 |   wave.getAudio = _sfxr_getAudioFn(wave);
 827 |   return wave;
 828 | }
 829 | 
 830 | var _actx = null;
 831 | var _sfxr_getAudioFn = function(wave) {
 832 |   return function() {
 833 |     // check for procedural audio
 834 |     var actx = null;
 835 |     if (!_actx) {
 836 |       if ('AudioContext' in window) {
 837 |         _actx = new AudioContext();
 838 |       } else if ('webkitAudioContext' in window) {
 839 |         _actx = new webkitAudioContext();
 840 |       }
 841 |     }
 842 |     actx = _actx;
 843 |     
 844 |     if (actx) {
 845 |       var buff = actx.createBuffer(1, wave.buffer.length, wave.header.sampleRate);
 846 |       var nowBuffering = buff.getChannelData(0);
 847 |       for (var i=0;i<wave.buffer.length;i++) {
 848 |         nowBuffering[i] = wave.buffer[i];
 849 |       }
 850 |       var volume = 1.0;
 851 |       var obj = {
 852 |         "channels": [],
 853 |         "setVolume": function(v) { volume = v; return obj; },
 854 |         "play": function() {
 855 |           var proc = actx.createBufferSource();
 856 |           proc.buffer = buff;
 857 |           var gainNode = actx.createGain()
 858 |           gainNode.gain.value = volume;
 859 |           gainNode.connect(actx.destination)
 860 |           proc.connect(gainNode);
 861 |           if (proc["start"]) {
 862 |             proc.start();
 863 |           } else if (proc["noteOn"]) {
 864 |             proc.noteOn(0);
 865 |           }
 866 |           this.channels.push(proc);
 867 |           return proc;
 868 |         }
 869 |       };
 870 |       return obj;
 871 |     } else {
 872 |       var audio = new Audio();
 873 |       audio.src = wave.dataURI;
 874 |       return audio;
 875 |     }
 876 |   };
 877 | };
 878 | 
 879 | /*** conversions from slider values, internal, and units ***/
 880 | 
 881 | // convert from slider values to internal representation
 882 | 
 883 | var sliders = {
 884 |   p_env_attack:  function (v) { return v * v * 100000.0 },
 885 |   p_env_sustain: function (v) { return v * v * 100000.0 },
 886 |   p_env_punch:   function (v) { return v },
 887 |   p_env_decay:   function (v) { return v * v * 100000.0 },
 888 | 
 889 |   p_base_freq:  function (v) { return 8 * 44100 * (v * v + 0.001) / 100 },
 890 |   p_freq_limit: function (v) { return 8 * 44100 * (v * v + 0.001) / 100 },
 891 |   p_freq_ramp:  function (v) { return 1.0 - Math.pow(v, 3.0) * 0.01 },
 892 |   p_freq_dramp: function (v) { return -Math.pow(v, 3.0) * 0.000001 },
 893 | 
 894 |   p_vib_speed:    function (v) { return Math.pow(v, 2.0) * 0.01 },
 895 |   p_vib_strength: function (v) { return v * 0.5 },
 896 | 
 897 |   p_arp_mod:   function (v) { 
 898 |     return v >= 0 ? 1.0 - Math.pow(v, 2) * 0.9 : 1.0 + Math.pow(v, 2) * 10; },
 899 |   p_arp_speed: function (v) { return (v === 1.0) ? 0 :
 900 |                               Math.floor(Math.pow(1.0 - v, 2.0) * 20000 + 32)},
 901 | 
 902 |   p_duty:      function (v) { return 0.5 - v * 0.5; },
 903 |   p_duty_ramp: function (v) { return -v * 0.00005 },
 904 | 
 905 |   p_repeat_speed: function (v) { return (v === 0) ? 0 :
 906 |                                  Math.floor(Math.pow(1-v, 2) * 20000) + 32 },
 907 | 
 908 |   p_pha_offset: function (v) { return (v < 0 ? -1 : 1) * Math.pow(v,2)*1020 },
 909 |   p_pha_ramp:   function (v) { return (v < 0 ? -1 : 1) * Math.pow(v,2) },
 910 | 
 911 |   p_lpf_freq:   function (v) { return Math.pow(v, 3) * 0.1 },
 912 |   p_lpf_ramp:   function (v) { return 1.0 + v * 0.0001 },
 913 |   p_lpf_resonance: function (v) { return 5.0 / (1.0 + Math.pow(v, 2) * 20) }, // * (0.01 + fltw);
 914 | 
 915 |   p_hpf_freq: function (v) { return Math.pow(v, 2) * 0.1 },
 916 |   p_hpf_ramp: function (v) { return 1.0 + v * 0.0003 },
 917 | 
 918 |   sound_vol: function (v) { return Math.exp(v) - 1; }
 919 | };
 920 | 
 921 | var sliders_inverse = {
 922 |   p_env_attack:  function (v) { return Math.sqrt(v / 100000.0); },
 923 |   p_env_sustain: function (v) { return Math.sqrt(v / 100000.0); },
 924 |   p_env_punch:   function (v) { return v; },
 925 |   p_env_decay:   function (v) { return Math.sqrt(v / 100000.0); },
 926 | 
 927 |   p_base_freq:  function (v) { return Math.sqrt(v * 100 / 8 / 44100 - 0.001); },
 928 |   p_freq_limit: function (v) { return Math.sqrt(v * 100 / 8 / 44100 - 0.001); },
 929 |   p_freq_ramp:  function (v) { return Math.cbrt((1.0 - v) / 0.01); },
 930 |   p_freq_dramp: function (v) { return Math.cbrt(v / -0.000001); },
 931 | 
 932 |   p_vib_speed:    function (v) { return Math.sqrt(v / 0.01); },
 933 |   p_vib_strength: function (v) { return v / 0.5; },
 934 | 
 935 |   p_arp_mod:   function (v) {
 936 |     return v < 1 ? Math.sqrt((1.0 - v) / 0.9) : -Math.sqrt((v - 1.0) / 10.0);
 937 |   },
 938 |   p_arp_speed: function (v) { return (v === 0) ? 1.0 :
 939 |                               ( (1.0 - Math.sqrt((v - (v < 100 ? 30 : 32)) / 20000)))},
 940 | 
 941 |   p_duty:      function (v) { return (v - 0.5) / -0.5; },
 942 |   p_duty_ramp: function (v) { return v / -0.00005 },
 943 | 
 944 |   p_repeat_speed: function (v) { return v === 0 ? 0 : -(Math.sqrt((v - 32) / 20000) - 1.0) },
 945 | 
 946 |   p_pha_offset: function (v) { return (v < 0 ? -1 : 1) * Math.sqrt(Math.abs(v) / 1020) },
 947 |   p_pha_ramp:   function (v) { return (v < 0 ? -1 : 1) * Math.sqrt(Math.abs(v)) },
 948 | 
 949 |   p_lpf_freq:   function (v) { return Math.cbrt(v / 0.1); },
 950 |   p_lpf_ramp:   function (v) { return (v - 1.0) / 0.0001; },
 951 |   p_lpf_resonance: function (v) { return Math.sqrt((1.0 / (v / 5.0) - 1) / 20) },
 952 | 
 953 |   p_hpf_freq: function (v) { return Math.sqrt(v / 0.1); },
 954 |   p_hpf_ramp: function (v) { return (v - 1.0) / 0.0003; },
 955 |   sound_vol: function (v) { return Math.log(v + 1);; }
 956 | }
 957 | 
 958 | // convert from internal representation to domain value without units
 959 | 
 960 | var domain = {
 961 |   p_env_attack:  function (v) { return (v / 44100); },
 962 |   p_env_sustain: function (v) { return (v / 44100); },
 963 |   p_env_punch:   function (v) { return (v * 100); },
 964 |   p_env_decay:   function (v) { return (v / 44100); },
 965 | 
 966 |   p_base_freq:   function (v) { return v; },
 967 |   p_freq_limit:  function (v) { return v; },
 968 |   p_freq_ramp:   function (v) { return (44100*Math.log(v)/Math.log(0.5)); },
 969 |   p_freq_dramp:  function (v) { return (v*44100 / Math.pow(2, -44101./44100)); },
 970 | 
 971 |   p_vib_speed:    function (v) { return (441000/64. * v); },
 972 |   p_vib_strength: function (v) { return (v*100); },
 973 | 
 974 |   p_arp_mod:   function (v) { return (1./v); },
 975 |   p_arp_speed: function (v) { return (v / 44100); },
 976 | 
 977 |   p_duty:      function (v) { return (100 * v); },
 978 |   p_duty_ramp: function (v) { return (8 * 44100 * v); },
 979 | 
 980 |   p_repeat_speed: function (v) { return v === 0 ? 0 : (44100./v); },
 981 | 
 982 |   p_pha_offset: function (v) { return (1000*v/44100); },
 983 |   p_pha_ramp:   function (v) { return (1000*v); },
 984 | 
 985 |   p_lpf_freq:   function (v) { return (v === .1) ? 0 : 8 * 44100 * v / (1-v); },
 986 |   p_lpf_ramp:  function (v) { return Math.pow(v, 44100); },
 987 |   p_lpf_resonance: function (v) { return (100*(1-v*.11));},
 988 | 
 989 |   p_hpf_freq:   function (v) { return 8 * 44100 * v / (1-v); },
 990 |   p_hpf_ramp: function (v) { return Math.pow(v, 44100); },
 991 | 
 992 |   sound_vol: function (v) { return 10 * Math.log(v*v) / Math.log(10); }
 993 | }
 994 | 
 995 | var domain_inverse = {
 996 |   p_env_attack:  function (v) { return (v * 44100); },
 997 |   p_env_sustain: function (v) { return (v * 44100); },
 998 |   p_env_punch:   function (v) { return (v / 100); },
 999 |   p_env_decay:   function (v) { return (v * 44100); },
1000 | 
1001 |   p_base_freq:   function (v) { return v; },
1002 |   p_freq_limit:  function (v) { return v; },
1003 |   p_freq_ramp:   function (v) { return Math.exp(Math.log(0.5) * v / 44100); },
1004 |   p_freq_dramp:  function (v) { return v * Math.pow(2, -44101./44100) / 44100; },
1005 | 
1006 |   p_vib_speed:    function (v) { return (64. / 441000) * v; },
1007 |   p_vib_strength: function (v) { return (v / 100); },
1008 | 
1009 |   p_arp_mod:   function (v) { return (1. / v); },
1010 |   p_arp_speed: function (v) { return (v * 44100); },
1011 | 
1012 |   p_duty:      function (v) { return (v / 100); },
1013 |   p_duty_ramp: function (v) { return (v / (8 * 44100)); },
1014 | 
1015 |   p_repeat_speed: function (v) { return v <= 0 ? 0 : v > 1378 ? 32 : (44100 / v); },
1016 | 
1017 |   p_pha_offset: function (v) { return (v / 1000) * 44100; },
1018 |   p_pha_ramp:   function (v) { return (v / 1000); },
1019 | 
1020 |   p_lpf_freq:   function (v) { return (v / (v + 8 * 44100)); },
1021 |   p_lpf_ramp:  function (v) { return Math.pow(v, 1 / 44100); },
1022 |   p_lpf_resonance: function (v) { return (1 - v / 100) / .11; },
1023 | 
1024 |   p_hpf_freq:   function (v) { return (v / (v + 8 * 44100)); },
1025 |   p_hpf_ramp: function (v) { return Math.pow(v, 1 / 44100); },
1026 | 
1027 |   sound_vol: function (v) { return Math.sqrt(Math.pow(10, v / 10)); }
1028 | }
1029 | 
1030 | // convert from internal representation to printable units
1031 | 
1032 | var units = {
1033 |   p_env_attack:  function (v) { return (v / 44100).toPrecision(4) + ' sec' },
1034 |   p_env_sustain: function (v) { return (v / 44100).toPrecision(4) + ' sec' },
1035 |   p_env_punch:   function (v) { return '+' + (v * 100).toPrecision(4) + '%'},
1036 |   p_env_decay:   function (v) { return (v / 44100).toPrecision(4) + ' sec' },
1037 |   
1038 |   p_base_freq:   function (v) { return v.toPrecision(4) + 'Hz' },
1039 |   p_freq_limit:  function (v) { return v.toPrecision(4) + 'Hz' },
1040 |   p_freq_ramp:   function (v) { 
1041 |     return (44100*Math.log(v)/Math.log(0.5)).toPrecision(4) + ' 8va/sec'; },
1042 |   p_freq_dramp:  function (v) { 
1043 |     return (v*44100 / Math.pow(2, -44101./44100)).toExponential(3) +
1044 |       ' 8va/s^2'; },
1045 | 
1046 |   p_vib_speed:    function (v) { return v === 0 ? 'OFF' : 
1047 |                                  (441000/64. * v).toPrecision(4) + ' Hz'},
1048 |   p_vib_strength: function (v) { return v === 0 ? 'OFF' : 
1049 |                                  '&plusmn; ' + (v*100).toPrecision(4) + '%' },
1050 | 
1051 |   p_arp_mod:   function (v) { return ((v === 1) ? 'OFF' : 
1052 |                                       'x ' + (1./v).toPrecision(4)) },
1053 |   p_arp_speed: function (v) { return (v === 0 ? 'OFF' :
1054 |                                       (v / 44100).toPrecision(4) +' sec') },
1055 | 
1056 |   p_duty:      function (v) { return (100 * v).toPrecision(4) + '%'; },
1057 |   p_duty_ramp: function (v) { return (8 * 44100 * v).toPrecision(4) +'%/sec'},
1058 | 
1059 |   p_repeat_speed: function (v) { return v === 0 ? 'OFF' : 
1060 |                                  (44100/v).toPrecision(4) + ' Hz' },
1061 | 
1062 |   p_pha_offset: function (v) { return v === 0 ? 'OFF' :
1063 |                                (1000*v/44100).toPrecision(4) + ' msec' },
1064 |   // Not so sure about this:
1065 |   p_pha_ramp:   function (v) { return v === 0 ? 'OFF' :
1066 |                (1000*v).toPrecision(4) + ' msec/sec' },
1067 | 
1068 |   p_lpf_freq:   function (v) { 
1069 |     return (v === .1) ? 'OFF' : Math.round(8 * 44100 * v / (1-v)) + ' Hz'; },
1070 |   p_lpf_ramp:  function (v) {  if (v === 1) return 'OFF';
1071 |     return Math.pow(v, 44100).toPrecision(4) + ' ^sec'; },
1072 |   p_lpf_resonance: function (v) { return (100*(1-v*.11)).toPrecision(4)+'%';},
1073 | 
1074 |   p_hpf_freq:   function (v) { 
1075 |     return (v === 0) ? 'OFF' : Math.round(8 * 44100 * v / (1-v)) + ' Hz'; },
1076 |   p_hpf_ramp: function (v) {  if (v === 1) return 'OFF';
1077 |     return Math.pow(v, 44100).toPrecision(4) + ' ^sec'; },
1078 | 
1079 |   sound_vol: function (v) { 
1080 |     v = 10 * Math.log(v*v) / Math.log(10);
1081 |     var sign = v >= 0 ? '+' : '';
1082 |     return sign + v.toPrecision(4) + ' dB'; 
1083 |   }
1084 | };
1085 | 
1086 | /*** Plumbing ***/
1087 | 
1088 | (function (root, factory) {
1089 |   if(typeof define === "function" && define.amd) {
1090 |     // Now we're wrapping the factory and assigning the return
1091 |     // value to the root (window) and returning it as well to
1092 |     // the AMD loader.
1093 |     define(["./riffwave"], function(RIFFWAVE){
1094 |       return (root.jsfxr = factory(RIFFWAVE));
1095 |     });
1096 |   } else if(typeof module === "object" && module.exports) {
1097 |     // I've not encountered a need for this yet, since I haven't
1098 |     // run into a scenario where plain modules depend on CommonJS
1099 |     // *and* I happen to be loading in a CJS browser environment
1100 |     // but I'm including it for the sake of being thorough
1101 |     RIFFWAVE = require("./riffwave.js");
1102 |     module.exports = (root.jsfxr = factory(RIFFWAVE));
1103 |   } else {
1104 |     root.jsfxr = factory(root.RIFFWAVE);
1105 |   }
1106 | }(this, function(RIFFWAVE) {
1107 |   // module code here....
1108 |   return {
1109 |     "sfxr": sfxr,
1110 |     "convert": {
1111 |       "sliders": sliders,
1112 |       "domain": domain,
1113 |       "sliders_inverse": sliders_inverse,
1114 |       "domain_inverse": domain_inverse,
1115 |       "units": units,
1116 |     },
1117 |     "parameters": {
1118 |       "order": params_order,
1119 |       "signed": params_signed,
1120 |     },
1121 |     "Params": Params,
1122 |     "SoundEffect": SoundEffect,
1123 |     "waveforms": {
1124 |       "SQUARE": SQUARE,
1125 |       "SAWTOOTH": SAWTOOTH,
1126 |       "SINE": SINE,
1127 |       "NOISE": NOISE
1128 |     }
1129 |   };
1130 | }));
1131 | 


--------------------------------------------------------------------------------