HTML5 Music Player

By Danny Markov

how-to-create-html5-music-player1

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.

Features

  • 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.
  • Cover art and ID3 tags with JavaScript ID3 Reader.
  • Shuffle and Repeat options.
  • No internet dependencies – works just as well if run locally offline.
  • Responsive design.

HTML5 Music Player

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

The app listens for JavaScript drag and drop events. When you drop a mp3 file, it extracts information like song and artist name, if they are available, from the file’s ID3 tags. Each song is placed in an array, which represents our playlist. The application then initializes the Wavesurfer.js audio player, which generates the awesome wave visualization for every song and plays it.

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.

Design

  • 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!

Further Reading

Source:: Tutorialzine.com