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

herrstrietzel/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 two audio files to the assets folder (HTML supports MP3, WAV, and OGG). The files must have the same duration to work correctly.
  2. Update ab-player.js with the location/filenames
    soundA.src = "./assets/[YOUR_FILE_A].mp3";
    soundB.src = "./assets/[YOUR_FILE_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)

About

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 50.3%
  • HTML 27.4%
  • CSS 22.3%