Simply install using

$ npm install trackswitch --save

alternatively you can manually download and include trackswitch.min.css and trackswitch.min.js in your page.


<div class="player">
      STEM file Halcyon Sky - Koronium 5 by Native Instruments
    <img data-style="width: 80%; margin: auto;" class="seekable" data-seek-margin-left="4" data-seek-margin-right="4" src="mix.png">
    <ts-track title="Violins" data-img="violins.png">
        <ts-source src="violins.mp3"></ts-source>
    <ts-track title="Synths" data-img="synth.png">
        <ts-source src="synth.mp3"></ts-source>
    <ts-track title="Bass" data-img="bass.png">
        <ts-source src="bass.mp3"></ts-source>
    <ts-track title="Drums" data-img="drums.png">
        <ts-source src="drums.mp3"></ts-source>


See configuration examples.

Usage scenarios

See examples.


If you use this tool to present your results, please make sure to cite the relevant publication:

Werner, Nils, et al. “trackswitch.js: A Versatile Web-Based Audio Player for Presenting Scientifc Results.” 3rd web audio conference, London, UK. 2017.

  title={trackswitch.js: A Versatile Web-Based Audio Player for Presenting Scientifc Results},
  author={Nils Werner and Stefan Balke and Fabian-Rober Stöter and Meinard Müller and Bernd Edler},
  booktitle={3rd web audio conference, London, UK},