<waxml/>

Dynamic Mixing

Learn how to implement interactive, dynamic music on a web page using WebAudioXML (WAXML).

Crossfade between different layers with drum loops.

Try the interactive p5.js Sketch and add your own layers: https://editor.p5js.org/hanslindetorp/sketches/jOlwL0VFb

The audio.xml file:

1
2
3
4
<Mixer crossFadeRange="1" mix="$intensity">
  <GainNode id="mix1-A" />
  <GainNode id="mix1-B" />
</Mixer>

This code generates a mixer that can fade between two different sounds. The sounds are place (in sync) in an arrangement in the musixc.xml file:

1
2
3
4
<arrangement class="music">
  <track loopLength="2" src="audio/percussion-120bmp-2bars.mp3" output="#mix1-A" />
  <track loopLength="4" src="audio/drums-120bmp-4bars.mp3" output="#mix1-B" />    
</arrangement>

Please, note that the output on the tracks routes the audio signal into the different inputs in the dynamic mixer.

Crossfade layers with drum and bass loops using the “vertical” method and different crossfade settings depending on the instrument.

Try this interactive p5.js Sketch: https://editor.p5js.org/hanslindetorp/sketches/xIVIfAnho