jamesseanwright / wax

An experimental, JSX-compatible renderer for the Web Audio API

Wax

An experimental, JSX-compatible renderer for the Web Audio API. I wrote Wax for my Manchester Web Meetup talk, Manipulating the Web Audio API with JSX and Custom Renderers.

While it has decent test coverage and is stable, I still deem this to be a work-in-progress. Use in production at your own risk!

/** @jsx createAudioElement */

import {
    createAudioElement,
    renderAudioGraph,
    AudioGraph,
    Oscillator,
    Gain,
    StereoPanner,
    Destination,
    setValueAtTime,
    exponentialRampToValueAtTime,
} from 'wax-core';

renderAudioGraph(
    <AudioGraph>
        <Oscillator
            frequency={[
                setValueAtTime(200, 0),
                exponentialRampToValueAtTime(800, 3),
            ]}
            type="square"
            endTime={3}
        />
        <Gain gain={0.2} />
        <StereoPanner pan={-1} />
        <Destination />
    </AudioGraph>
);

Example Apps

Consult the example directory for a few small example apps that use Wax. The included README summarises them and details how they can be built and ran.

Documentation

• Introduction
• Getting Started
• Manipulating Audio Parameters
• Building Complex Graphs with <Aggregation />s
• Updating Rendered <AudioGraph />s
• Interop with React
• API Reference
• Local Development

wax's Issues

How to express circular connections

The most common scenario for this is a delay with feedback, often with gain and/or a filter applied before feeding back to the input of the delay, but there are more complex setups too.

Ideally, the solution is not named inputs and outputs, e.g. <Delay name=”d”/><Gain output=”d”/>, at least I personally consider string references a design failure in pretty much every scenario due to creating a non-(trivially-)verifiable namespace and an easy error surface, e.g. see ref in React.

cp: cannot stat 'example/src/*.{html,mp3}': No such file or directory

Running npm run dev, I get the error which is in the title, and this in my log:

0 info it worked if it ends with ok
1 verbose cli [ '/home/moox/.nvm/versions/node/v8.11.4/bin/node',
1 verbose cli   '/home/moox/.nvm/versions/node/v8.11.4/bin/npm',
1 verbose cli   'run',
1 verbose cli   'dev' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'predev', 'dev', 'postdev' ]
5 info lifecycle [email protected]~predev: [email protected]
6 info lifecycle [email protected]~dev: [email protected]
7 verbose lifecycle [email protected]~dev: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]~dev: PATH: /home/moox/.nvm/versions/node/v8.11.4/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/mnt/d/Developer/React/wax/node_modules/.bin:/home/moox/.local/bin:/home/moox/.yarn/bin:/home/moox/.config/yarn/global/node_modules/.bin:/home/moox/.nvm/versions/node/v8.11.4/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/mnt/c/Program Files (x86)/Common Files/Intel/Shared Libraries/redist/intel64/compiler:/mnt/c/ProgramData/Oracle/Java/javapath:/mnt/c/Program Files (x86)/Intel/iCLS Client:/mnt/c/Program Files/Intel/iCLS Client:/mnt/c/Windows/System32:/mnt/c/Windows:/mnt/c/Windows/System32/wbem:/mnt/c/Windows/System32/WindowsPowerShell/v1.0:/mnt/c/Program Files (x86)/Intel/Intel(R) Management Engine Components/DAL:/mnt/c/Program Files/Intel/Intel(R) Management Engine Components/DAL:/mnt/c/Program Files (x86)/Intel/Intel(R) Management Engine Components/IPT:/mnt/c/Program Files/Intel/Intel(R) Management Engine Components/IPT:/mnt/c/Program Files (x86)/QuickTime/QTSystem:/mnt/c/Windows/System32:/mnt/c/Windows:/mnt/c/Windows/System32/wbem:/mnt/c/Windows/System32/WindowsPowerShell/v1.0:/mnt/c/Python34/Scripts:/mnt/c/Python34:/mnt/c/Program Files/Amazon/AWSCLI:/mnt/c/Users/Mark/AppData/Roaming/npm:/mnt/c/Program Files/Intel/WiFi/bin:/mnt/c/Program Files/Common Files/Intel/WirelessCommon:/mnt/c/Program Files (x86)/GitExtensions:/mnt/c/Program Files (x86)/Yarn/bin:/mnt/c/Program Files/Git/cmd:/mnt/c/Program Files/nodejs:/mnt/c/Windows/System32:/mnt/c/Windows:/mnt/c/Windows/System32/wbem:/mnt/c/Windows/System32/WindowsPowerShell/v1.0:/mnt/c/HashiCorp/Vagrant/bin:/mnt/c/PHP7:/mnt/c/Windows/System32/OpenSSH:/mnt/c/Program Files (x86)/NVIDIA Corporation/PhysX/Common:/mnt/c/Ruby23-x64/bin:/mnt/c/Program Files/nodejs:/mnt/c/Users/Mark/AppData/Local/Microsoft/WindowsApps:/mnt/c/Program Files/Intel/WiFi/bin:/mnt/c/Program Files/Common Files/Intel/WirelessCommon:/mnt/c/Users/Mark/AppData/Roaming/npm:/mnt/c/Users/Mark/AppData/Local/Microsoft/WindowsApps:/mnt/c/Program Files/PostgreSQL/10/bin:/mnt/c/Users/Mark/AppData/Local/Programs/Microsoft VS Code/bin:/snap/bin
9 verbose lifecycle [email protected]~dev: CWD: /mnt/d/Developer/React/wax
10 silly lifecycle [email protected]~dev: Args: [ '-c',
10 silly lifecycle   'npm run build && npm run build-example && node example/devServer' ]
11 silly lifecycle [email protected]~dev: Returned: code: 1  signal: null
12 info lifecycle [email protected]~dev: Failed to exec dev script
13 verbose stack Error: [email protected] dev: `npm run build && npm run build-example && node example/devServer`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (/home/moox/.nvm/versions/node/v8.11.4/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:285:16)
13 verbose stack     at emitTwo (events.js:126:13)
13 verbose stack     at EventEmitter.emit (events.js:214:7)
13 verbose stack     at ChildProcess.<anonymous> (/home/moox/.nvm/versions/node/v8.11.4/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at emitTwo (events.js:126:13)
13 verbose stack     at ChildProcess.emit (events.js:214:7)
13 verbose stack     at maybeClose (internal/child_process.js:925:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)
14 verbose pkgid [email protected]
15 verbose cwd /mnt/d/Developer/React/wax
16 verbose Linux 4.4.0-17134-Microsoft
17 verbose argv "/home/moox/.nvm/versions/node/v8.11.4/bin/node" "/home/moox/.nvm/versions/node/v8.11.4/bin/npm" "run" "dev"
18 verbose node v8.11.4
19 verbose npm  v5.6.0
20 error code ELIFECYCLE
21 error errno 1
22 error [email protected] dev: `npm run build && npm run build-example && node example/devServer`
22 error Exit status 1
23 error Failed at the [email protected] dev script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

I am using Ubuntu on Windows.