HTML5 MP3 Player - Plays local files and parses ID3 tags

http://antimatter15.github.com/player/player.html

by antimatter15 • 15 years ago

125 27 15 years ago

antimatter15.github.com

jwingy• 15 years ago

Doesn't look like it supports unicode - no Chinese on my Chinese mp3s!

HaloZero• 15 years ago

It won't let me open any mp3 files in my iTunes collection... Using Chrome Dev Channel + Mac OSX. Does Chrome not support this?

phwd• 15 years ago

I am not on dev (using Chrome 10.0.648.204).

Try User > Music > and select the iTunes Folder

pstinnett• 15 years ago

Took a while to start loading but it eventually loaded my songs.

nealb• 15 years ago

Worked well in Chrome 10 on Windows 7 for the first few minutes then crashed. Adding files was a little bit slow but the audio playback and tagging worked well. Nicely done though, it's very cool!

trotsky2• 15 years ago

What does the security model for opening the files look like? If you specify a directory chooser the app can span the directory tree and open/parse all files readable to the user? Any idea if it will walk symbolic links? I'm a bit surprised there isn't more of a user warning from the browser.

Nice proof of concept though! Very impressive what can be done. Worked well in stable channel + openSUSE.

jackolas• 15 years ago

I assume you can't read out data without the user clicking on a browser styled "choose" button.

nl• 15 years ago

Exactly.

The permission is implicitly granted by the user when they select a file. (Obviously this is implementation specific, but I think all implementations behave this was)

pat2man• 15 years ago

Operating systems seem to care a lot about write access , less about read access. As much as browsers should care about this an OS should do some sandboxing.

Vivtek• 15 years ago

That is just too cool.

darkletterL• 15 years ago

Works perfectly fine on Chrome Dev + Win 7. Wish there was a way to organize songs and make playlists though.

beilabs• 15 years ago

Surely this is possible, just use the offline DB and some funky Javascript.

kalmi10• 15 years ago

I don't think that the security model would let you do this.

51Cards• 15 years ago

I'm quite curious about the file reading code. With a simple directory browse from the user couldn't you start to walk the file tree and read whatever you liked? Nothing I see to stop something like this then firing off Ajax calls to send up everything it finds. I think some digging through the code is in order.

trotsky2• 15 years ago

It seems quite clear that you could package up all files and send them to the server. I've read through the code in this example though and I don't see anything that could be doing that here. Since all of the code is being served off of github I think it'd be pretty hard to switch in some malicious code at times, but I would be pretty wary of granting access to a webkitdirectory chooser type from a less transparent site.

BrainScraps• 15 years ago

Brilliant!

shii• 15 years ago

No success on my Cr-48 running latest ChromeOS.

Nice work though, antimatter15, keep it up!

MatthewRayfield• 15 years ago

This is pretty awesome. I was unaware of Chrome's directory opening abilities. That's a game changer for this kind of app.

est• 15 years ago

the core:

    <input type="file" webkitdirectory directory multiple mozdirectory onchange="getSongs(this.files)">

There is a security issue on windows, try type `shell:cache` in the directory browsing dialog.

sp3322• 15 years ago

Does it matter if I can read my own directory listing?

pornel• 15 years ago

Author of the app can read your directory listing (and whether that matters depends on what you have in this directory and whether you trust application's author)

grigory• 15 years ago

This is so awesome.

Having tried numerous audio players for OSX I just can't find something that I'm satisfied with. I guess I'll just start building my own now :)

sp3322• 15 years ago

Well, it doesn't read ID3 tags, but if you just drag your music folder into Firefox, you can browse around and play MP3, Vorbis etc. files. It also works with videos.

antimatter15• 15 years ago

Yeah, it does.

Ruudjah• 15 years ago

Chrome 10: Succes (although I can only select a folder)

Firefox 3.6: fail

Chromium 10: loads, fails to play

Opera: loads site with errors, clicking button doesn't do anything

Sephr• 15 years ago

> Chromium 10: loads, fails to play

Make sure to use OGG Vorbis audio in Chromium. I'm guessing you tried to play MP3.

aj700• 15 years ago

Not talking about this specifically, but the model:

If an app only deals with local data, does it need to be a web app?, except that thereby it becomes zero-install, zero-update, global and cross-platform.

Could or is ChromeOS going to play local mp3s before? It's not much of an OS if it can only play mp3s on a server somewhere, with a browser plugin. Will Spotify and other streaming clients work on it? Is it cloud data only?

HTML5 MP3 Player - Plays local files and parses ID3 tags

Related Stories