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.
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
- JavaScript Drag and Drop API
- JavaScript File API
- Wavesurfer.js on GitHub
- JavaScript-ID3-Reader on GitHub
Bootstrap Studio
The revolutionary web design tool for creating responsive websites and apps.
Learn more
flex box should work fine in safari, this demo doesn't
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.
How to add mp3 files in this player...?
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.
This is great :D
It's looking good, working well, It's online, simple... Wow!
Great job Danny :)
Very impressive - functional and good-looking!
One can couple it with nw.js and get a real desktop music player :)
It's very impressive.... nice job dude!!
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
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.
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
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
Thank you very much :) Please look at my other comment see if that's possible :)
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!
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 :)
I also will be soon looking at function to maybe add MP3 file to play before a song plays, is this possible?
Very cool :D
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 ?
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.
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?
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.
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!
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.
superb!!! something really nice after A long time on the web
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!
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.
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
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.
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.
That's awesome!
Please share it with us if you've uploaded it somewhere :)
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?
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.
Well, thank you anyway, this is a great project!! Awesome :) Keep working like that!
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.
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 :)
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.
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!
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)
I love this! Would it be considered open-source? I would really like to build upon it for my web app.
Cheers!
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
Any simple way to add comments, like how SoundCloud does it?
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
Hello, the Wavesurfer.js link is broken, may be update whith https://wavesurfer-js.org/ ;)
Thanks a lot for this awesome tut!
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!!!!!!!!!
Hello, sadly the script seem broken in Firefox, drag & drop doesn't operate any more, without having any alerts in the console.
Thanks.