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();
Copy

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);
Copy

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);
Copy

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 SOUNDER

Installation

$ npm install --save xsound
Copy

or,

$ yarn add xsound
Copy

Usage

In case of using ES Modules,

import { XSound, X } from 'xsound';
Copy

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

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

In case of using CDN,

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

Setup

Use Webpack Dev Server

$ git clone git@github.com:Korilakkuma/XSound.git
$ cd XSound
$ npm install
$ npm run dev
$ open http://localhost:8080/playground/
Copy

Use Docker

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

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 });
Copy

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' });
Copy

Validate parameters on the application side

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

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$/
  }
})
Copy

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