Web

Overview

Running Switchboard audio engines on the web couldn't be easier. We've spend a long time simplifying the steps required to get a fully functional audio engine up and running in your application really easy.

Audio software development is tricky and often results in otherwise proficient and experienced developers drowning in audio domain software concepts, incorrectly wiring audio libraries together in suboptimal patterns.

Using Switchboard on the web requires zero prior knowledge of audio engines, web audio, audio worklets, multiple threads, web assembly or any DSP domain knowledge. We've carefully taken care of all of that for you so you can focus elsewhere when building your applications.

Switchboard audio engines running in Javascript are defined in Switchboard JSON format, which offers a quick and easy way to describe an audio pipeline as a set of node, connections and parameters.

Quick start

The Switchboard SDK for Web allows you to run complexis available on NPM as @synervoz/switchboard-sdk-js and can be loaded just like any other library into your JS project.

First install the Switchboard SDK for Javascript

npm install @synervoz/switchboard-sdk-js

Then in your application, import the SDK as follows

import { WebAudioEngine } from '@synervoz/switchboard-sdk-js'

// Create an instance of anaudio engine
const switchboardAudioEngine = new WebAudioEngine()

// Define audio graph in Switchboard JSON (string format supported too).
const exampleSwitchboardJSON = {
  nodes: [
    {
      id: 'myToneGenerator',
      type: 'Switchboard.SineGenerator',
    },
  ],
}

async function startEngine(json) {
  // Load the JSON into the audio engine
  await switchboardAudioEngine.initialize(switchboardJSON)

  // Start the audio playback (usually on a mouse interaction)
  switchboardAudioEngine.resume()
}

startEngine(exampleSwitchboardJSON)

✨ It's that simple.

Switchboard Editor JSON design tool

Our online Switchboard Editor here help you to design your Switchboard JSON. We automatically wrap some really useful UI around your Switchboard JSON to tweak parameters while you are developing your audio engine and see whats going on under the hood.

Here's an embedded example of the above graph running in the Audio IDE.

Remember though that when it comes to running Switchboard in your own application, we take care of the audio engine, it's up to you to wrap any UI around it you might need.

Switchboard Web Extensions

To use Switchboard extensions on the web, you'll need to supply an additional argument to the constructor of the WebAudioEngine imported from our SDK package.

import { WebAudioEngine } from '@synervoz/switchboard-sdk-js'

// Define extensions to load (and where to load from)
const configuration = {
  extensionLocations: [
    {
      path: 'https://cdn.jsdelivr.net/npm/@synervoz/switchboard-sdk-js-extensions@0.0.1/dist',
      extensionsToLoad: [
        'Agora',
        'Superpowered',
        //... any other extension you want to load
      ]
    }
  ]
};

// Create an instance of anaudio engine
const switchboardAudioEngine = new WebAudioEngine(configuration)

// Define audio graph in Switchboard JSON (string format supported too).
const exampleSwitchboardJSON = {
  nodes: [
    {
      "id": "generator",
      "type": "Superpowered.Generator"
    },
    {
      "id": "webRtcSink",
      "type": "Agora.Sink",
      "config": {
          "channelId": "hotel-california",
          "peerId": "Jack",
          "token": "YOUR_AGORA_TOKEN"
      }
    },
  ],
}

async function startEngine(json) {
  // Load the JSON into the audio engine
  await switchboardAudioEngine.initialize(switchboardJSON)

  // Start the audio playback (usually on a mouse interaction)
  switchboardAudioEngine.resume()
}

startEngine(exampleSwitchboardJSON)

In the example above, we are now able to include Superpowered.Generator and Agora.Sink node types in our graph as we have loaded the associated extensions. By default, Switchboard will only initialise with the default Switchboard.* node types. Any other node type must be loaded as an extension in the way highlighted above.

You'll also notice that we declare the path URL of the extensions to load, with our CDN given in the example above. If you are developing your own Switchboard Web Extension, you are able to put your own URLs here, but please make sure that you have considered any CORS restrictions as the extensions are pulled in at runtime in the browser, not build time.

See the Switchboard Web Extension GitHub repository for more infomation about creating a Web Extension for Switchboard.