An audio player that keeps multiple tracks synchronized.
npm install audio-syncAn audio player allowing you switch tracks keeping the same timestamp.
- Download
- Use CDN
- See example
``html`
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
`javascript`
audioSync([
// 'track-en' will be converted to document.getElementById('track-en')
['english-version.mp3', 'track-en'],
['french-version.mp3', document.getElementById('track-fr')]
]);
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.
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.
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
#### 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
Feel free to report a bug or to
provide any kind of improvement or fix through
pull request.
`shell`
git clone https://github.com/pellul/audio-sync.git
npm install
`shell`
npm run build
This will generate a index.js minified file in the dist/` folder.