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