Skip to content

MP3 Player

This is my take at an MP3 player. I would consider this one of my better designs (I’m no designer or artist, and that sort of shows). It’s fairly minimalistic, a product both of my design and the fact it was created a few hours. But this isn’t about design. No, it’s a music player that operates entirely in your browser with files stored on your hard drive.

Here’s basically how it works. There’s an <input type=file webkitdirectory> so you can go and select your music folder. It gets a list of all files, reads the first 128 kilobytes of each mp3 file and parses it for ID3 tags, constructs a library and makes it searchable.

The interface is composed of four main items: a huge search bar, the music library, a playlist and the audio controls. It’s pretty self explanatory.

Here it is:

It should work on Chrome, it might work on Safari, and will partially work on Firefox 4 (No directory select, no MP3). Definitely won’t work on IE9 and probably won’t work on Opera.

Posted in MP3 Player.

Tagged with , , , , , , , , , , , , .

40 Responses

Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.

  1. SquareWheel says

    I’m giving it a try with 100GB of music, let’s see how it performs…

  2. SquareWheel says

    It looks like the search results become contaminated when the page is still building your music list. The new songs it finds will start being added to the “filtered” list.

    Also, I appeared to overload it with my large library list. The playing music started stopping intermittently, and then the tab crashed on me.

  3. Balls Canhardly says

    Does not seem to work in Firefox 4.

  4. dinu says

    works good for me .. however

    1. Can we make this a local stuff, the URL so that everone will have a feel of safety ?

    2. Once I add a song or two, I should have options to add one or more to it :D that’ll be fun

    but as always

    AWESOME Work

  5. Renji says

    Works Great!

    Would be great if the music playback started automatically on adding a folder, instead of having to select each one.

  6. Tuxkowo says

    Awesome piece of code!

    However I noticed it consumes lot of RAM and crashes after some MP3 being added (maybe 300, I didn’t really checked)

  7. badboy_ says

    As I tweeted before: cool project, but too bad that chromium on linux can’t play audio with OSSv4 :(

  8. qqq says

    What’s the upper limit on the library size? I tried it on 60GB and it crashed. It’d be nice if it stopped short of crashing.

  9. admin says

    I don’t believe there’s any singular fixed point at which it will definitely crash. It’s probably variable based on browser, operating system, amount of RAM, processor, stars in the sky, your horoscope, quantum fluctuations and the population of orange fish in the atlantic.

  10. qqq says

    Tried it on a smaller directory. I love the lightweight, clean interface. This is really cool!
    Some points:
    * It’d be nice if one could select multiple songs at once
    * It’d be nice if one could save playlists
    * It’d be nice if one could remove songs from playlists — I doubleclicked and it added things twice.

    I never thought this could be done in the browser though, good work!

  11. admin says

    * if you search for a bunch of songs and then press enter, it’ll add everything there to your playlist, so that’s sort of like multiple song select.

    * right now there isn’t really anything for saving playlists for some odd technical reasons.

    * Middle click the song in the playlist to remove it.

  12. chrelad says

    Very cool! Nice job :)

  13. Daniel says

    I would like to point out that was created before yours.

    I wish this worked in Firefox 4.0.

  14. admin says

    I’m not saying this is the first thing that plays mp3 files. This is the first dedicated web-based mp3 player (like which loads songs from your disk and parses ID3 tags.

  15. Gamer_Z. says

    Interesting idea, but will not work for me because my music is not in one directory (well, unless you want to search the entire contents of my homedir).

  16. alpha123 says

    Nice. That’s impressive.

    It would be nice if us unorganized slobs could select multiple directories with music in them though.

  17. Iago says

    You should put in Chrome Web Store! is very good!

  18. Lin says

    What about license? Could I develop my app base on it?

  19. admin says

    MIT license if that’s okay with you.

  20. Ben C says

    Love the project. I was thinking of implementing a web based jukebox and would really like a way to play local files on the browser and then allow others to see them. Would it be all right if I built off of your code base? It would be much appreciated. Thanks.

  21. admin says

    Sure the code is on github.

  22. Ben C says

    Thanks so much. I’ll let you know if I move forward with the project.

  23. cameron says

    Get ur ass on msn, i had a pretty cool idea ^^

  24. Pedram says

    Did you test it on Cr48? It’s not working for me :(

  25. admin says

    It works for me, but I had to move my music to a downloads directory, selecting the entire downloads directory didnt work for me on cr48.

  26. Thomas Cross says

    @Antimatter: Does this parse only ID3v2 tags? Does it support ID3 version 2.3 and 2.4? Would it take a lot of time to make an ID3v1 tag parser? I was looking for a quick and dirty javascript tag parser and found your mp3 player. I am developing a (soon to be open source) chrome app and would give you the credit for tag parsing. All I need is artist album and title.

  27. admin says

    I don’t know if it parses the others, but there are other id3 parsers that are more complete than mine

  28. Thomas Cross says

    Just so you know I got the developer of id3v2.js to adapt his code to the file api. So now all tags are supported and my application is live.

  29. Brian F. says

    I have been using this MP3 player in my CR-48 using a SanDisk 32GB MicroSDHC card that has about 15 Gigs of MP3s in individual folders and the player reads the folders perfectly including nested folders too. However I have noticed for some reason not related to MP3 tags or anything else I can find, It appears that some of the songs will have a random 3 letter song name instead of the real name. It will be the same for the all the songs on that album. For instance all songs will “rtl” or “pex” ect… It only does this on about 100 files out of the 2000. Any ideas on how to fix this on my end? Or, is this some bug that needs to be worked out in the code? Thanks in advance

  30. Athiest says

    i like to improve the functionality of ur player. add a combo box in a player and also connect it to mysql. wat u say?

  31. lsflling says

    It’s cool.
    I’m thinking build a web music libary can play mp3s on server.

  32. Lisandra Gaspard says

    I merely wanted to inform you about how much my partner and i appreciate every little thing you’ve contributed to help increase the value of the lives of an individual in this subject matter. Through your own articles, we’ve gone out of just a newbie to an expert in the area. It is truly a tribute to your work. Thanks

  33. xMonsterx says

    @squarewheel The reason it crashed on you is because you tried to load 100GB into the cache of your web browser.

  34. Timo8562 says

    Why don’t make an chrome app of this (and also a French translation!) ?

  35. says

    I am now not certain the place you’re getting your info, however great topic. I needs to spend some time studying much more or figuring out more. Thanks for great info I used to be on the lookout for this information for my mission.

  36. Anonymous says

    Chinese garbled.

  37. 24 hour fitness says

    Once these basics are achieved, long lining has benefits for everybody.

    Any further education you commit yourself 24 hour fitness to making a change, so they had to
    fix it, not reinforce it. With only two specialist fly-halves named, however, it has made
    us learn quite a few customers towards an affiliate program.
    For example if you hurt your 24 hour fitness leg,
    do not obsess. The stronger your core, the more likely that you will
    be able to incorporate the 24 hour fitness ones that FITNESS Magazine and Yahoo!

Continuing the Discussion

  1. How To Create Music Playlists On Google Chrome - Edit Songs | Chrome Story linked to this post on March 29, 2011

    [...] via Hello there! If you are new here, you might want to subscribe to the RSS feed for updates on this topic.Powered by WP Greet Box WordPress Plugin [...]

  2. Using Google Chrome As Your MP3 Player ? Yes, That’s Possible | Introduction of the best chrome apps linked to this post on March 29, 2011

    [...] via [...]

  3. Ecoutez vos mp3 directement dans Chrome | Chrome OS linked to this post on March 31, 2011

    [...] Source #dd_ajax_float{ background:none repeat scroll 0 0 #FFFFFF; border:1px solid #DDDDDD; float:left; margin-left:-80px; margin-right:10px; margin-top:10px; position:absolute; z-index:9999; }jQuery(document).ready(function($){ //put content div class, when scroll beyond this y, float it var $postShare = $(‘#dd_ajax_float’); if($(‘.dd_content_wrap’).length > 0){ var descripY = parseInt($(‘.dd_content_wrap’).offset().top) – 20; var pullX = $postShare.css(‘margin-left’); $(window).scroll(function () { var scrollY = $(window).scrollTop(); var fixedShare = $postShare.css(‘position’) == ‘fixed’; //make sure .post_share exists if($(‘#dd_ajax_float’).length > 0){ if ( scrollY > descripY && !fixedShare ) { $postShare.stop().css({ position: ‘fixed’, top: 16 }); } else if ( scrollY < descripY && fixedShare ) { $postShare.css({ position: 'absolute', top: descripY, marginLeft: pullX }); } } }); } });jQuery(document).ready(function($) { window.setTimeout('loadTwitter_2782()',1000);window.setTimeout('loadGBuzz_2782()',1000);window.setTimeout('loadFBLike_2782()',1000);window.setTimeout('loadFBShareMe_2782()',1000); }); function loadTwitter_2782(){ jQuery(document).ready(function($) { $('.dd-twitter-2782').remove();$.getScript(''); }); } function loadGBuzz_2782(){ jQuery(document).ready(function($) { $('.dd-gbuzz-2782').remove();$.getScript(''); }); } function loadFBLike_2782(){ jQuery(document).ready(function($) { $('.dd-fblike-2782').remove();$('.DD_FBLIKE_AJAX_2782').attr('width','50');$('.DD_FBLIKE_AJAX_2782').attr('height','60');$('.DD_FBLIKE_AJAX_2782').attr('src',''); }); } function loadFBShareMe_2782(){ jQuery(document).ready(function($) { $('.dd-fbshareme-2782').remove();$('.DD_FBSHAREME_AJAX_2782').attr('width','53');$('.DD_FBSHAREME_AJAX_2782').attr('height','69');$('.DD_FBSHAREME_AJAX_2782').attr('src',''); }); }jQuery(document).ready(function($) { if($(window).width()> 600){ $(‘#dd_ajax_float’).show() }else{ $(‘#dd_ajax_float’).hide() } $(window).resize(function() { if($(window).width()> 600){ $(‘#dd_ajax_float’).show() }else{ $(‘#dd_ajax_float’).hide() } }); }); [...]

Some HTML is OK

or, reply to this post via trackback.