1.0.1 • Published 4 years ago

audio-sync v1.0.1

Weekly downloads
2
License
MIT
Repository
github
Last release
4 years ago

audiosync

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

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.

ClassWhen
loadingThe track is being fetched
pausedThe track is not playing
playingThe track is playing
failedAn 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
MP3See more
OGGSee more
AACSee more
FLACSee more
WAVSee 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.

1.0.1

4 years ago

1.0.0

4 years ago