Experiment: HTML5 Music Player
This time we want to share with you a cool experiment that we made. It is a music player that lives in your browser. It uses the powerful HTML5 File Reader and Audio APIs. As a result, you can just drag and drop mp3 files from your computer into the browser, and they are automatically added to your playlist.
- You can load mp3 files from your computer by dragging them and dropping them in the browser. Chrome users can drop whole folders as well.
- It doesn’t use any kind of server code (so no need for PHP or node.js) – the player is a single HTML file.
- Nothing is uploaded – the mp3 files are kept in your browser.
- Cool audio visualization and audio playback thanks to Wavesurfer.js.
- Select and search songs in a playlist.
- Shuffle and Repeat options.
- No internet dependencies – works just as well if run locally offline.
- Responsive design.
How to use it
The application is a simple HTML file that you open in your browser. You only need to download our zip file from the button near the beginning of the article, and unzip it somewhere on your computer. Unfortunately, due to security restrictions in modern browsers it won’t work if you just double click the index.html file. You will have to open it through a locally running web server like Apache or Nginx and access it through localhost. Or you can just use our demo, nothing is uploaded so your music is safe.
How it works
From there on we can do everything you would expect from a native audio player – play next/previous, pause, pick songs and so on. Our playlist section also gives users the option to remove songs from the player or search for a particular track, album or artist.
You can learn more about how the player works by reading the /assets/js/script.js file in our source code. It is well commented and easy to follow.
- The main layout of the app is made via flexbox. This allowed us to evenly position all bars and buttons without having to worry about responsiveness. Read more about flexbox here.
- The pop up effect for the playlist and other highlights and small animations were done via CSS by manipulating classes with jQuery.
- All of the icons we needed for this music player were already available in Font Awesome – thanks guys!
- Wavesurfer.js on GitHub
Presenting Bootstrap Studio
a revolutionary tool that developers and designers use to create
beautiful interfaces using the Bootstrap Framework.