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: http://antimatter15.github.com/player/player.html
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.
I’m giving it a try with 100GB of music, let’s see how it performs…
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.
Does not seem to work in Firefox 4.
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
that’ll be fun
but as always
AWESOME Work
Works Great!
Would be great if the music playback started automatically on adding a folder, instead of having to select each one.
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)
As I tweeted before: cool project, but too bad that chromium on linux can’t play audio with OSSv4
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.
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.
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!
* 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.
Very cool! Nice job
I would like to point out that http://www.jplayer.org/ was created before yours.
I wish this worked in Firefox 4.0.
I’m not saying this is the first thing that plays mp3 files. This is the first dedicated web-based mp3 player (like ex.fm/grooveshark/etc) which loads songs from your disk and parses ID3 tags.
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).
Nice. That’s impressive.
It would be nice if us unorganized slobs could select multiple directories with music in them though.
You should put in Chrome Web Store! is very good!
What about license? Could I develop my app base on it?
MIT license if that’s okay with you.
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.
Sure the code is on github. http://github.com/antimatter15/player
Thanks so much. I’ll let you know if I move forward with the project.
Get ur ass on msn, i had a pretty cool idea ^^
Did you test it on Cr48? It’s not working for me
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.
@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.
I don’t know if it parses the others, but there are other id3 parsers that are more complete than mine
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. http://chmoder.org:81/projects/bracket/
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
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?
It’s cool.
I’m thinking build a web music libary can play mp3s on server.
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
@squarewheel The reason it crashed on you is because you tried to load 100GB into the cache of your web browser.
Amazing!
Why don’t make an chrome app of this (and also a French translation!) ?
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.
OK.
Chinese garbled.
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!