AB-Audio-Player

A HTML/CSS/Javascript-only audio player that allows you to toggle between two versions of the same audio file - with NO dependencies. What's it for? One pratical reason is the side-by-side comparison of different audio mixes/production processes.

VIEW DEMO 🎵

(back to top)

Zero-Dependencies

Built with only HTML, CSS, and Javascript.

Getting Started

1. Simply add audio files to the assets folder (HTML supports MP3, WAV, and OGG). The files must have the same duration to work correctly.
2. Update index.html player__wrapper div's attributes 'data-audio-a' and 'data-audio-b' with the location/filenames for each player. Example for two players:

   <div class="player__wrapper"
        data-audio-a="./assets/sound1-a.mp3"
        data-audio-b="./assets/sound1-b.mp3"
   >
   <div class="player__wrapper"
        data-audio-a="./assets/sound2-a.mp3"
        data-audio-b="./assets/sound2-b.mp3"
   >

3. There are some caveats with different browsers handling how the audio file is preloaded, muted, etc. Test thoroughly for production use.

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information. If you do use it, let me know - I'd love to see it in action!

(back to top)