How can my web app user click a button to play a locally stored mp3 file?

Question

I'd like to allow my users to click a button in a list of tunes on a page to open a simple mp3 player (the HTML5 Player is fine) that can play a downloaded mp3 track for that song that is stored on the user's hard drive. Is that even possible? Every attempt I've tried - using HTML and/or JS, JQ - fails.

I can copy the local mp3 file path/filename into my Chrome address bar. With no code at all it helpfully opens an HTML5 player in a new tab that allows me to play the tune just fine. Why is it so difficult to allow the user to do the same thing by simply clicking a button inside my app?

I have been able to get an mp3 player to appear on the page. But no matter how I specify the file path it refuses to play the tune - occasionally telling me my code is not allowed to access local files.

Answer 1

For security reasons, Javascript does not have the privilege to modify files, or even open files on the client machine. If that is absolutely what you want to accomplish, try to use a JAVA Applet.

Answer 2

Thanks Lyes Ben. Over the last few days thinking about your comments has helped me understand that what I was attempting was not the right approach - and why. After some research I now believe that using the DropBox api I can code a simple 'drop-in-saver' function that would not only automatically save the files locally that my user would generate through the app, but would at the same time, provide another feature that was on my list - it would give the user offline access to those files. As a bonus the files would be synced on all the user's devices, with no additional code or complexity in the app.

Sometimes I get so focused on solving a particular technical problem that I fail to step back and ask if it is the right problem to solve in the first place.

It's not done yet but I'm now working on that DropBox interface to my app. I'll update this answer when (if) I get there as I suspect this could be a solution in some cases for others facing a similar problem.