Installation

Simply install using

$ npm install trackswitch --save

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

Example

<div class="player">
    <!--
      STEM file Halcyon Sky - Koronium 5 by Native Instruments
      https://www.native-instruments.com/en/products/maschine/maschine-expansions/halcyon-sky
    -->
    <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>
    <ts-track title="Synths" data-img="synth.png">
        <ts-source src="synth.mp3"></ts-source>
    </ts-track>
    <ts-track title="Bass" data-img="bass.png">
        <ts-source src="bass.mp3"></ts-source>
    </ts-track>
    <ts-track title="Drums" data-img="drums.png">
        <ts-source src="drums.mp3"></ts-source>
    </ts-track>
</div>

Configuration

See configuration examples.

Usage scenarios

See examples.

Citation

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.

@inproceedings{werner2017trackswitchjs,
  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},
  year={2017},
  organization={Citeseer}
}