Skip to content

HTML, CSS, JS only A/B audio player. Toggle and compare two versions of the same audio.

License

Notifications You must be signed in to change notification settings

mattbartley/AB-Audio-Player

Repository files navigation

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.

(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)