项目作者: Korilakkuma

项目描述 :
Web Audio API Library for Synthesizer, Effects, Visualization, Multi-Track Recording, Audio Streaming, Visual Audio Sprite ...
高级语言: JavaScript
项目地址: git://github.com/Korilakkuma/XSound.git
创建时间: 2017-11-19T07:00:02Z
项目社区:https://github.com/Korilakkuma/XSound

开源协议:MIT License

下载


XSound - Powerful Audio Features Easily ! -

Node.js CI
node-current
License: MIT
npm
jsDelivr

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

Supported Browsers are Chrome, Edge, Firefox, Opera and Safari

Getting Started

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

  1. 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) …

  1. // The instance of `AudioContext`
  2. const context = X.get();
  3. // Create the instance of `Chorus` that is defined by XSound
  4. const chorus = new X.Chorus(context);
  5. const oscillator = context.createOscillator();
  6. // The instance that is defined by XSound has connectors for input and output
  7. oscillator.connect(chorus.INPUT);
  8. chorus.OUTPUT.connect(context.destination);
  9. // Set parameters for chorus
  10. chorus.param({
  11. time : 0.025,
  12. depth: 0.5,
  13. rate : 2.5,
  14. mix : 0.5
  15. });
  16. // Activate
  17. chorus.activate();
  18. oscillator.start(0);

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

  1. X.Analyser(context: AudioContext);
  2. X.Recorder(context: AudioContext);
  3. // Effectors
  4. X.Autopanner(context: AudioContext);
  5. X.BitCrusher(context: AudioContext);
  6. X.Chorus(context: AudioContext);
  7. X.Compressor(context: AudioContext);
  8. X.Delay(context: AudioContext);
  9. X.Equalizer(context: AudioContext);
  10. X.Filter(context: AudioContext);
  11. X.Flanger(context: AudioContext);
  12. X.Fuzz(context: AudioContext);
  13. X.Listener(context: AudioContext);
  14. X.NoiseGate(context: AudioContext);
  15. X.NoiseSuppressor(context: AudioContext);
  16. X.OverDrive(context: AudioContext);
  17. X.Panner(context: AudioContext);
  18. X.Phaser(context: AudioContext);
  19. X.PitchShifter(context: AudioContext);
  20. X.Preamp(context: AudioContext);
  21. X.Reverb(context: AudioContext);
  22. X.Ringmodulator(context: AudioContext);
  23. X.Stereo(context: AudioContext);
  24. X.Tremolo(context: AudioContext);
  25. X.VocalCanceler(context: AudioContext);
  26. 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

  1. $ npm install --save xsound

or,

  1. $ pnpm install xsound

Usage

In case of using ES Modules,

  1. import { XSound, X } from 'xsound';

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

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

In case of using CDN,

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

Setup

Use Webpack Dev Server

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

Use Docker

  1. $ git clone git@github.com:Korilakkuma/XSound.git
  2. $ cd XSound
  3. $ npm install
  4. $ npm run build # for build WebAssembly Modules
  5. $ npm run watch
  6. $ docker compose up -d --build
  7. $ 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).

  1. $ git clone https://github.com/emscripten-core/emsdk.git # Use an another directory excepte XSound directory
  2. $ cd emsdk
  3. $ ./emsdk install latest
  4. $ ./emsdk activate latest
  5. $ source ./emsdk_env.sh
  6. $ cd /${path}/XSound
  7. # 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).

XSound Playground Screenshot

Migration to v3

Please refer to API Documentation for details.

Case sensitive

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

Use plain object if parameters setter

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

Validate parameters on the application side

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

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).

  1. new TerserWebpackPlugin({
  2. // ... other options
  3. terserOptions: {
  4. keep_classnames: /^.*?Processor$/
  5. }
  6. })

Pickups

License

Released under the MIT license