Integrating the Switchboard SDK Into a Web Project

Adding the Switchboard SDK to Your Project

The Web Switchboard SDK contains three files:

• SwitchboardSDK.js
• SwitchboardSDK.wasm
• SwitchboardWorkletProcessor.js

Copy these files to your project, then import the SwitchboardSDK.js file:

<script src="/libs/switchboard-sdk/index.js" type="module"></script>

Initializing the SDK

Before you make any calls to the Switchboard SDK you need to initialize it.

Please get in touch to get your clientID and clientSecret values.

let switchboard = new SwitchboardSDK();
switchboard.initialize(
    "Your client ID",
    "Your client secret",
    "/libs/switchboard-sdk/SwitchboardSDK.wasm" // Path to SwitchboardSDK.wasm
    "/libs/switchboard-sdk/SwitchboardWorkletProcessor.js" // Path to SwitchboardWorkletProcessor.js file
).then(result => {
    console.log("Switchboard SDK is initialized.");
}

Using JSON Audio Graphs

The simplest way to get started with the Switchboard SDK is to use JSON for describing an audio graph. You can use the createJSONGraphEngine to create an AudioEngine that runs the audio graph.

let audioGraphConfig = {
    "nodes": [
        {"id": "sineNode", "type": "SineGeneratorNode"},
        {"id": "gainNode", "type": "GainNode"}
    ],
    "connections": [
        {"sourceNode": "sineNode", "destinationNode": "gainNode"},
        {"sourceNode": "gainNode", "destinationNode": "outputNode"}
    ]
}
let audioEngine = await switchboard.createJSONGraphEngine(audioGraphConfig);
audioEngine.start();

The AudioEngine creates a WebAudio AudioContext with a single AudioWorkletNode. If you want to manage the AudioContext yourself, you can use the createJSONGraphWorkletNode method that returns AudioWorkletNode. The returned AudioWorkletNode instance can be used in a WebAudio graph.

Using The Switchboard SDK in a Custom AudioWorkletProcessor

Using the Switchboard SDK in a custom AudioWorkletProcessor is also possible. This way you can get access to most C++ classes and methods from JavaScript.

import {SwitchboardSDK} from "../../../libs/switchboard-sdk/index.js";

class SineWaveWorkletProcessor extends AudioWorkletProcessor {
    constructor(options) {
        super();
        this.port.onmessage = (e) => {
            let event = e.data.event;
            if (event === 'wasmLoaded') {
                let sdkConfig = e.data.data;
                this.configure(sdkConfig);
            } else if (event === 'destruct') {
                this.destruct();
            } else if (event === 'setFrequency') {
                let newFrequency = e.data.data;
                this.setFrequency(newFrequency);
            } else if (event === 'setAmplitude') {
                let newAmplitude = e.data.data;
                this.setAmplitude(newAmplitude);
            }
        }
    }

    configure(sdkConfig) {
        this.switchboard = new SwitchboardSDK();
        this.switchboard.configure(sdkConfig)
            .then(response => {
                this.constructAudioGraph();
            })
    }

    constructAudioGraph() {
        const inputChannels = [];
        const outputChannels = [1];
        this.sineNode = new this.switchboard.classes.SineGeneratorNode();
        this.sineNode.setFrequency(220.0);
        this.sineNode.setAmplitude(1.0);

        this.gainNode = new this.switchboard.classes.GainNode();
        this.gainNode.setGain(0.8);

        this.audioGraph = this.switchboard.createAudioGraph(inputChannels, outputChannels, 128, 48000);
        audioGraph.addNode(this.sineNode);
        audioGraph.addNode(this.gainNode);
        audioGraph.connect(this.sineNode, this.gainNode);
        audioGraph.connect(this.gainNode, this.audioGraph.getOutputNode());

        this.audioGraph.start();
    }

    destruct() {
        this.audioGraph.destruct();
        this.gainNode.destruct();
        this.sineNode.destruct();
    }

    setFrequency(newFrequency) {
        this.sineNode.setFrequency(newFrequency);
    }

    setAmplitude(newAmplitude) {
        this.sineNode.setAmplitude(newAmplitude);
    }

    process(inputs, outputs, parameters) {
        return this.audioGraph.processGraph(inputs, outputs);        
    }
}

registerProcessor("sine-wave-worklet-processor", SineWaveWorkletProcessor);