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).
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);XSound.app uses this library.
Now, I'm creating website for Web Audio API. Please refer to the following site for understanding API Documentation.
$ npm install --save xsoundor,
$ yarn add xsoundIn 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>$ git clone [email protected]:Korilakkuma/XSound.git
$ cd XSound
$ npm install
$ npm run dev
$ open http://localhost:8080/playground/$ git clone [email protected]:Korilakkuma/XSound.git
$ cd XSound
$ npm install
$ npm run watch
$ docker compose up -d --build
$ open http://localhost:8080/playground/XSound Playground (Watch by YouTube).
Please refer to API Documentation for details.
// Bad (v2 or earlier)
X('audio').module('panner').param({ coneinnerangle: 240 });
// Good (v3)
X('audio').module('panner').param({ coneInnerAngle: 240 });// Bad (v2 or earlier)
X('oscillator').get(0).param('type', 'sawtooth');
// Good (v3)
X('oscillator').get(0).param({ type: 'sawtooth' });if ((type === 'sine') || (type === 'square') || (type === 'sawtooth') || (type === 'triangle')) {
X('oscillator').get(0).param({ type });
}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$/
}
})- 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.
-
Released under the MIT license
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent