Experiment: HTML5 Music Player

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.

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

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

Presenting Bootstrap Studio

a revolutionary tool that developers and designers use to create
beautiful interfaces using the Bootstrap Framework.

Learn more
Web Browser Frame DevKit Box Mouse Cursor
by Danny Markov

Danny is Tutorialzine's Bootstrap and HTML5 expert. When he is not in the office, you can usually find him riding his bike and coding on his laptop in the park.

1Share this post
2Read one more article
3Get your free book
Book Cover
jQuery Trickshots

Tutorialzine's advanced jQuery techniques book.

Download

44 Comments

  1. RT says:

    flex box should work fine in safari, this demo doesn't

    1. Danny Markov says:

      Thanks for the heads up!
      We had forgotten to put -webkit- in front of all flexbox related CSS. The demo is updated and should work fine on Safari.

  2. ashish says:

    How to add mp3 files in this player...?

    1. Danny Markov says:

      You need to have the mp3 files on your computer. From there just drag them and drop them into your browser where the player is running. The screen should turn blue if you are doing it right.

  3. Paweł says:

    This is great :D
    It's looking good, working well, It's online, simple... Wow!

  4. Ralf Lima says:

    Great job Danny :)

  5. DaveBowman says:

    Very impressive - functional and good-looking!
    One can couple it with nw.js and get a real desktop music player :)

  6. Rohit Suthar says:

    It's very impressive.... nice job dude!!

  7. Martin says:

    Hello, great app, how would I add an "Upload" button that people can click also along with the drag and drop function, looking at say mobile users can click and browse via their audio files.

    Thanks

    1. Danny Markov says:

      Hey Martin and thanks for the great suggestion!
      You can add an Upload button by creating an input type="file". Then, create an "on change" event handler for the new input and in it copy the code from

      dropZone.on('drop', function(e) {...copy the code inside these brackets...}.

      Hope i was helpful.

      1. Martin says:

        Hi Mate, a little stuck as to the rest of the code, could you provide the full code and where to place it all, thanks, i have added an input type="file" but not sure on the rest of it.

        Thanks

        1. Danny Markov says:

          Sure thing!

          First of all make sure you insert multiple in your input tag to allow upload of many files at once.

          After that, paste this code anywhere in the script.js file.

          http://pastebin.com/MebETZ81

          1. Martin says:

            Thank you very much :) Please look at my other comment see if that's possible :)

          2. Martin says:

            I did this as input file ""

            and I put the code you provided into the bottom of script.js but nothing? am i doing something wrong - sorry!

          3. Danny Markov says:

            Here is all the code you will need.

            Paste this in script.js - http://pastebin.com/MebETZ81.

            And this is the file input button - http://pastebin.com/7h0SAR5G.

            Hope it works now :)

      2. Martin says:

        I also will be soon looking at function to maybe add MP3 file to play before a song plays, is this possible?

  8. Shinobi-san says:

    Very cool :D

  9. Charlie says:

    I would know how to use method to get files from the server. Because I try to use .get to load files on the server and then get ID3, but it needs an object FileList to work.

    Do I have a bad idea here ?

    1. Danny Markov says:

      Hi Charlie and thanks for the question.

      The problem here is that file object received from drag & drop and the one from fetching from server aren't the same. The code in our player is made to work with object FileList, since this is what the Drag and Drop API returns. To make it work with files loaded with .get, the code will have to be changed, or the received data converted.

  10. Chris J says:

    Howdy, I love this, but how would I make it play a preset list of songs located on the server?

    Lets say on a certain page I had a snip of js run to load up a list of tracks into the "alltracks" or "playlist" variables(whichever is the appropriate one). How would that code look?

    1. Danny Markov says:

      Hello Chris, thank you for writing!

      On paper this seems like an easy task, but actually there is a difference in the way that JavaScript interpreters files uploaded from the computer and those from a server. For this reason, there would have to be serious changes in the way our code processes file objects to make it possible to read files from a server.

      Other than that, pushing them to the "allTracks" array is enough.

      Sorry I couldn't provide you with a snippet of code.

  11. rudy stein says:

    Awesome, great and simple functionality. Keep it up the good work guys.

    One question: will it be too hard/complicated to add an back end so that files are uploaded to server and played from there ? (to all users on website if they choose to) ?
    If so any suggestion is welcome so we can do this ourselves.

    Cheers!

    1. Danny Markov says:

      Hey Rudy! Glad you liked the player :)

      About your question - creating a server with the files on it and grabbing them via AJAX or some other way is totally possible. However, uploading files to the public is considered copyright infringement and is illegal.

  12. vivek says:

    superb!!! something really nice after A long time on the web

  13. noob says:

    first of all great work! is it possible to upload files instead of dragging them i've tried using the input type file w/ multiple on the tag but it seems when i try to open nothing happens. im new to js so please enlighten me a bit. thanks!

    1. Danny Markov says:

      You also need to add this piece of code to the JavaScript.

      http://pastebin.com/MebETZ81.

      And this is how the input should look like.

      http://pastebin.com/7h0SAR5G.

  14. Jack says:

    I have had a look at a few comments you have made ect and found that JavaScript for Upload Files but can't seem to work out the rest, could you provide the code for the Upload button, I feel it may be helpful to other users also!

    Thanks

    1. Danny Markov says:

      Hello Jack and sorry i didn't manage to make things clearer before.

      Here is all the code you will need. I've tested it and it works.

      http://pastebin.com/MebETZ81 - This piece of JavaScript goes anywhere in the script.js file.

      http://pastebin.com/7h0SAR5G - This is the HTML for the input button.

      Best of luck.

  15. Oliver Santos says:

    I just wanted to share that I implemented your player with a "remote controller" module. You can control the player remotely over the internet using other device web browser (like a smartphone/tablet). It's soo cool.

    1. Danny Markov says:

      That's awesome!

      Please share it with us if you've uploaded it somewhere :)

  16. Javier says:

    Man! I just want to thank you for this awesome player. I want to ask for help in something, I'm new in JS, but I want to take the music from my host, I've read than is enough to bring the location in the "allTracks" array, but it doesn't work for me. Can you help me?

    1. Danny Markov says:

      Hi Javier, and thanks for posting!

      I'm sorry, but because of the way the File API works, loading files from a server won't work without major changes to the file parsing code.

      1. Javier says:

        Well, thank you anyway, this is a great project!! Awesome :) Keep working like that!

  17. Walter says:

    Maan! this is some really awesome work you've done here. Works pretty well. Been doing something similar with angular-material but somehow I hadn't been able to make the drag and drop 'thingy' :-) to work so I had to stick with some static files which get quite boring after a I woked on the project for a little while. This is gonna be such a huge boost to my work. You are alife saver thanks a bunch.

  18. X-Raym says:

    Nice WaveSurfer integration !
    Particularly like that you extract ID3 infos from the sound.
    As WaveSurfer-WP (integration for WordPress) plugin author, I have to admit I am pretty impressed :)

  19. Timothy says:

    I love this am using it as a tutorial for my readers, i will try to re-code it so that It can work with server side scripts too. Danny, i am trying to mention you in my post for reference but you profile is not showing up please drop your Google plus profile link.

  20. Eman says:

    Wow and i thought something like this would be simple, guess i was wrong :) . Great project anyways, I'ma study it and perhaps one day create a similar one!

  21. Mick says:

    Great example Danny. Thanks.

    I've been trying to figure out how to have a player that continues to play even after page load without success. Nearest I got was to jquery.load content into an element on the same page as the player (and playlist) but that screws the history. Do you have any pointers or ideas that might set me in the right direction?

    (I can provide a link to what I have so far but would prefer not to make it public)

  22. Solomon says:

    I love this! Would it be considered open-source? I would really like to build upon it for my web app.

    Cheers!

  23. Krzys says:

    Hi,

    I'm very, very impressed as well. Is theere any chance that the player can play mp3 defined by URL, with seek functionality even if the track is not fully uploade?

    Greetings,
    Krzys

  24. Justin says:

    Any simple way to add comments, like how SoundCloud does it?

  25. Richie Canzo says:

    I would love to have this load mp3s from a server as a player for my original music. No copyright infringement. I see im not the only one who would want this, PLEASE make it happen. thank you

  26. dmsr says:

    Hello, the Wavesurfer.js link is broken, may be update whith https://wavesurfer-js.org/ ;)

    Thanks a lot for this awesome tut!

  27. John Sage says:

    Please i want to know how i can add it to a server and play song from folder, without the drop thing. Thanks. And really your site is the best!!!!!!!!!

Add Comment

Add a Reply

HTML is escaped automatically. Surround code blocks with <pre></pre> for readability.
Perks:   **bold**   __italics__   [some text](http://example.com) for links