- ×
XSound gives Web Developers Powerful Audio Features Easily !
Filed under formsOverview
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)
- Session (by WebSocket)
- 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).
// These type aliases are defined by XSound type BufferSize = 0 | 256 | 512 | 1024 | 2048 | 4096 | 8192 | 16384; type RecordType = 1 | 2; // Monaural | Stereo X.Analyser(context: AudioContext); X.Recorder(context: AudioContext, bufferSize: BufferSize, numberOfInputs: RecordType, numberOfOutputs: RecordType); X.Session(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, size: BufferSize); X.OverDrive(context: AudioContext); X.Panner(context: AudioContext); X.Phaser(context: AudioContext); X.PitchShifter(context: AudioContext, size: BufferSize); X.Preamp(context: AudioContext); X.Reverb(context: AudioContext); X.Ringmodulator(context: AudioContext); X.Stereo(context: AudioContext, size, size: BufferSize); X.Tremolo(context: AudioContext); X.VocalCanceler(context: AudioContext, size: BufferSize); 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.
Installation
$ npm install --save xsound
or,
$ yarn add xsound
Usage
In case of using CDN,
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/xsound@latest/build/xsound.min.js"></script>
In case of using ES Modules (for SSR ... etc),
import { XSound, X } from 'xsound';
Connect to WebSocket Server
const roomId = 'test-room-id-001'; // Any string // for `ScriptProcessorNode` const bufferSize = 2048; const numberOfInputChannels = 2; const numberOfOutputChannels = 2; const analyser = X('stream').module('analyser'); // for connecting to WebSocket server const tls = true; // Use `wss:` const host = 'xsound-websocket-server.herokuapp.com/'; const port = 8000; const path = '/app'; const setupParams = { roomId, bufferSize, numberOfInputChannels, numberOfOutputChannels, analyser }; const connectionParams = { roomId, tls, host, port, path }; // For example, sound source is `StreamModule` X('stream') .module('session') .setup(setupParams) .ready(connectionParams);
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/
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/
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 }); }
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
License
Released under the MIT license