audiosync

An audio player allowing you switch tracks keeping the same timestamp.

• Download
• Use CDN
• See example

Usage

<script src="https://cdn.jsdelivr.net/npm/audio-sync"></script>
<script>
  audioSync([
    ['file-a.mp3', 'track1-A'],
    ['file-b.mp3', 'track1-B'],
    ['file-c.mp3', 'track1-C']
  ]);
</script>

Instanciation

To instanciate a new player, use the provided audioSync() method.

This method needs an array of couples [fileLocation, element] with fileLocation being a string, and element being any HTMLElement or a string of the targeted HTMLElement id.

Example

audioSync([
  // 'track-en' will be converted to document.getElementById('track-en')
  ['english-version.mp3', 'track-en'],
  ['french-version.mp3', document.getElementById('track-fr')]
]);

Controls

Clicking an element while its track is paused will start playing it and will pause all the other tracks (and the all the other audio players instances with it).

Clicking an element while its track is playing will pause it.

Bindings

The HTMLElement is bound to the track once the track has finished loading.

Once all the tracks are available and ready to play, the player is set to ready and thus make it controllable.

If one of the track fails loading, then no binding occurs.

Customization

The HTMLElements will receive a class when its bound track state changes.

| Class | When | | :-------- | :------------------------- | | loading | The track is being fetched | | paused | The track is not playing | | playing | The track is playing | | failed | An error has occured* |

*This might happen when the sound file is not reachable or readable

Browser Compatibility and File Format Support

Retrocompatibility

Under the hood, audio-sync is using browser's native HTMLAudioElement to play the tracks.
audio-sync should support IE9 and every recent browser (tests required).
For more details → See browser compatibility

Audio file formats

| Format | | | -------| --- | | MP3 | See more | | OGG | See more | | AAC | See more | | FLAC | See more | | WAV | See more |

Or take a look at W3School compatibility table

Contribute

Feel free to report a bug or to provide any kind of improvement or fix through pull request.

Setup the project

git clone https://github.com/pellul/audio-sync.git
npm install

Build

npm run build

This will generate a index.js minified file in the dist/ folder.