Overview

XSound gives Web Developers Powerful Audio Features Easily !
In concrete, XSound is useful to implement the following features.

• Create Sound
• Play the One-Shot Audio
• Play the Audio
• Play the Media
• Streaming (by WebRTC)
• MIDI (by Web MIDI API)
• MML (Music Macro Language)
• Effectors (Compressor / Wah / Equalizer / Tremolo / Phaser / Chorus / Delay / Reverb … etc)
• Visualization (Overview in Time Domain / Time Domain / Spectrum)
• Multi-Track Recording (Create WAVE file)
• Audio Streaming
• Visual Audio Sprite

XSound don’t depend on other libraries or frameworks (For example, jQuery, React).

Supported Browsers

Getting Started

In case of using as full stack (For example, use oscillator) …

X('oscillator').setup([true, true, false, false]).ready(2, 5).start([440, 880]).stop();

or, in case of using as module base (For example, use chorus effector) …

// The instance of `AudioContext`
const context = X.get();
// Create the instance of `Chorus` that is defined by XSound
const chorus = new X.Chorus(context);
const oscillator = context.createOscillator();
// The instance that is defined by XSound has connectors for input and output
oscillator.connect(chorus.INPUT);
chorus.OUTPUT.connect(context.destination);
// Set parameters for chorus
chorus.param({
  time : 0.025,
  depth: 0.5,
  rate : 2.5,
  mix  : 0.5
});
// Activate
chorus.activate();
oscillator.start(0);

XSound enable to using the following classes (Refer to API Documentation for details).

X.Analyser(context: AudioContext);
X.Recorder(context: AudioContext);
// Effectors
X.Autopanner(context: AudioContext);
X.BitCrusher(context: AudioContext);
X.Chorus(context: AudioContext);
X.Compressor(context: AudioContext);
X.Delay(context: AudioContext);
X.Equalizer(context: AudioContext);
X.Filter(context: AudioContext);
X.Flanger(context: AudioContext);
X.Fuzz(context: AudioContext);
X.Listener(context: AudioContext);
X.NoiseGate(context: AudioContext);
X.NoiseSuppressor(context: AudioContext);
X.OverDrive(context: AudioContext);
X.Panner(context: AudioContext);
X.Phaser(context: AudioContext);
X.PitchShifter(context: AudioContext);
X.Preamp(context: AudioContext);
X.Reverb(context: AudioContext);
X.Ringmodulator(context: AudioContext);
X.Stereo(context: AudioContext);
X.Tremolo(context: AudioContext);
X.VocalCanceler(context: AudioContext);
X.Wah(context: AudioContext);

Demo

XSound.app uses this library.

Now, I’m creating website for Web Audio API. Please refer to the following site for understanding API Documentation.

Web Music Documentation

Installation

$ npm install --save xsound

or,

$ pnpm install xsound

Usage

In case of using ES Modules,

import { XSound, X } from 'xsound';

If SSR (Server-Side Rendering), use dynamic imports,

async () => {
  const { XSound, X } = await import('xsound');
};

In case of using CDN,

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/xsound@latest/build/xsound.min.js"></script>

Setup

Use Webpack Dev Server

$ git clone git@github.com:Korilakkuma/XSound.git
$ cd XSound
$ npm install
$ npm run build  # for build WebAssembly Modules
$ npm run dev
$ open http://localhost:8080/playground/

Use Docker

$ git clone git@github.com:Korilakkuma/XSound.git
$ cd XSound
$ npm install
$ npm run build  # for build WebAssembly Modules
$ npm run watch
$ docker compose up -d --build
$ open http://localhost:8080/playground/

Installation instructions using the emsdk

Use WebAssembly Modules on v4 or later.
Therefore, it is required to set up emsdk (Refer to details).

$ git clone https://github.com/emscripten-core/emsdk.git  # Use an another directory excepte XSound directory
$ cd emsdk
$ ./emsdk install latest
$ ./emsdk activate latest
$ source ./emsdk_env.sh
$ cd /${path}/XSound
# If error occurred, execute `softwareupdate --install-rosetta`, then retry (in case of using macOS)

API Documentation

XSound API Documentation

Playground

XSound Playground (Watch by YouTube).

Migration to v3

Please refer to API Documentation for details.

Case sensitive

// Bad (v2 or earlier)
X('audio').module('panner').param({ coneinnerangle: 240 });
// Good (v3)
X('audio').module('panner').param({ coneInnerAngle: 240 });

Use plain object if parameters setter

// Bad (v2 or earlier)
X('oscillator').get(0).param('type', 'sawtooth');
// Good (v3)
X('oscillator').get(0).param({ type: 'sawtooth' });

Validate parameters on the application side

if ((type === 'sine') || (type === 'square') || (type === 'sawtooth') || (type === 'triangle')) {
  X('oscillator').get(0).param({ type });
}

Migration to v3.1.x or later

If use bundle tool and compress class names such as webpack and terser-webpack-plugin,
must add the following options (because of using inline AudioWorkletProcessor).

new TerserWebpackPlugin({
  // ... other options
  terserOptions: {
    keep_classnames: /^.*?Processor$/
  }
})

Pickups

• 9 libraries to kickstart your Web Audio stuff - DEV Community

  • XSound is a batteries-included library for everything audio. From basic management and loading through streaming, effects, ending with visualizations and recording, this libraries provides almost everything! It also has nice, semi-chainable API with solid documentation.

• 20 Useful Web Audio Javascript Libraries – Bashooka
• Extending X3D Realism with Audio Graphs, Acoustic Properties and 3D Spatial Sound
• DeView: Confining Progressive Web Applications by Debloating Web APIs

  • In this section, we discuss the effectiveness of DeView’s Web API profiling in terms of code coverage. We choose three popular PWAs: Starbucks, Telegram [112], and XSound [57] from eCommerce, social media, and productivity categories, respectively.

License

Released under the MIT license