WebAudioXML DEMOs

The following DEMOs exemplifies how WebAudioXML can be used to build various types of web audio applications.

Really Simple

The simpliest implementation of WebAudioXML playing a sine wave.

https://hanslindetorp.github.io/WebAudioXML/demos/ReallySimple/

Circular UI

WebAudioXML contains a custom HTML element for easy connection to control audio parameters. This DEMO shows how it can be used to map pointer movements in a circle to control pitch and filter cutoff frequency from the angle and radius of the pointer.

https://hanslindetorp.github.io/WebAudioXML/demos/UI-circle/

Gamelan - Audio File playback

Learn how to implement audio sample playback.

https://hanslindetorp.github.io/WebAudioXML/demos/Gamelan/

PlaybackRate

Learn how to control an audio sample playback with WebAudioXML.

https://hanslindetorp.github.io/WebAudioXML/demos/PlaybackRate/

Granular Synthesis

This DEMO shows how to build a granular syntheziser using the AmbientAudio element. It's possible to control the start offset (loopStart), the grain size (loopLength), fadeTimes and detune. It's also possible to randomize all values.

https://hanslindetorp.github.io/WebAudioXML/demos/Granular/

FM-synth

Learn how to build an FM-synth with one carrier and one modulator oscillator using WebAudioXML. The graphical interface is build with webaudio-controls.

https://hanslindetorp.github.io/WebAudioXML/demos/FM-synth/

Touch instrument

Learn how to build a touch controlled instrument where the X-axis controls the pitch and the Y-axis the filter cutoff.

https://hanslindetorp.github.io/WebAudioXML/demos/TouchInstrument/

Flexible Scale

Learn how to build a touch-controlled instrument where the musical scale is dynamically controlled by the pointer gesture. It switches between minor and major depending on the direction of the melody.

https://hanslindetorp.github.io/WebAudioXML/demos/FlexibleScale/

Multiple regions for mapping

Learn how to build complex mappings between an incoming variable and the frequency output. In this example different regions on the X-axis map to either sliding pitches or musical scales.

https://hanslindetorp.github.io/WebAudioXML/demos/MultipleRegions/

Multi Target Slider

This DEMO shows how WebAudioXML can be used to create a multi-purpose-slider to control music mixing. The graph indicates the levels for the different tracks and effects along the axis of slider values. WebAudioXML is a language that lets a developer configure an audio setup and specify the mapping between incoming variables (like a slider) to control one or many audio parameter (like gain or frequency).

https://hanslindetorp.github.io/WebAudioXML/demos/MultiTargetSlider/

Generative Sound Effects from animation data

This DEMO shows how animation data in a video can be mapped to generate sound effects with WebAudioXML. The project - Ficson - , managed by Kjetil Falkenberg, was on display at the Science Museum for several months during 2021-22:

https://hanslindetorp.github.io/WebAudioXML/demos/Ficson

Gesture Controlled Musical Instrument

This DEMO shows how an image recognition library (MediaPipe from Google) can be used together with WebAudioXML to build gesture controlled musical instruments:

https://hanslindetorp.github.io/WebAudioXML/demos/AudioPipe

SmartphoneOrchestra DEMO using WebAudioXML

This DEMO shows how multiple smartphone web-clients can be setup to send Device Orientation Data and up to five independent touches via a node.js https-server. The server uses socket.io to pass the data to a master web-page that plays audio using WebAudioXML and iMusicXML. THere are a few steps to follow in order to run the project:

https://github.com/hanslindetorp/SmartphoneOrchestra