/js-mixed-audio-player

A js audio player that plays two versions of the same song in sync

Primary LanguageJavaScriptApache License 2.0Apache-2.0

JavaScript Raw/Mixed (Flat/Mix) audio sample player

A simple implementation of a Play/Pause action for a double-version music samples buttons (raw and mixed, or flat and mix). The main purpose is to let the web client easily play samples and toggle between listening the different versions while the two tracks stay in sync (and stop playing other groups).

Supports multiple track groups out of the box.

Depends on 3rd-party Howler JS library.

Demo

Here you find a live working demo web page with two different title tracks and relative flat/mix versions.

Install

Add:

<script defer src="js/howler.core.min-v2.2.0.js"></script>
<script defer src="js/player.js"></script>

at the end of the HTML <body> tag, your media files in samples/ folder and the js/ folder to your web server (or CDN service).

All the JavaScript files under js/ are transpiled with Babel for better browser support. If you want you can generate new ones with Babel too:

npm install  # installs Babel dependencies
npm run build

Usage

The main JS file when executed will:

  • search the DOM for HTML <button> tags with ids named like ${track-title}-flat and ${track-title}-mix, the titles should match media file names in samples/
  • load /samples/${track-title}-flat.webm and /samples/${track-title}-mix.webm plus /samples/${track-title}-flat.mp3 and ${track-title}-mix.mp3 if available (it will fall back to mp3 for Safari and old browsers like IE that don't support webm format)
  • attach play/pause behavior to onclick events of every <button> tag with id ${track-title}-flat and ${track-title}-mix

Refer to index.html, player.js and samples/ folder for the current demo values.