Playing local HTML5 audio from an external server on desktop - html

Question

My problem corresponds with the following hypothetical situation:
I have a website with a blog, which stores a playlist of music (just the filenames). I can edit this playlist remotely, for example from my phone when I am on the move. The content of the website is stored in a database on the server (MySQL), which cannot be accessed remotely.
When I get home and I am writing on my blog, I want to play the files in the list, on the same website, by using HTML5 audio. The files are located on my local computer at home. Hence I want to access these local files through my website.
An example of how I am addressing a local file is file:///M:/music.mp3.
The whole set-up works if I work from localhost, so I don't think it is a coding issue.
The problem is that both Firefox and Chrome, my favourite browsers, do not allow third party websites to access my local files without my active input.
It makes sense that the construction above is prevented by user agents due to security issues. I was hoping to find a solution in the fact that I use browser integrated HTML5 audio; IMO, there would be no security issue since the files that are loaded by HTML5 audio cannot be accessed via DOM, so some proper coding of the browsers would have left some breathing room here.
Some extra conditions:
I am looking for the blog and the music player to remain integrated.
I don't want to store my music files remotely.
I don't want to set up a local server.
Perhaps there is a way to add a security exception for my website to my browser, but this seems no longer the case for Firefox.
Any suggestion is most welcome!

Answer 1

I would suggest taking a look at the File System API. It's a very new API that's currently only working with chrome unfortunately :/
What you can basically do is request for access to the local filesystem using window.requestFileSystem() or window.webkitRequestFileSystem(), which has a success callback with a FileSystem object. Using this objects root (a Directory Entry object) you can look up the file using root.getFile(). This has a callback with a FileEntry object. You can then use this file entry to get the actual File object using fileEntry.file() and pass that into a FileReader object to get the data url. Untested example below, probably not perfect and you probably have to tweak with webkit prefixes.
// when file system loads
function onFs(fs){
// locate file
fs.root.getFile('M:/music.mp3', {/*options*/}, function(fileEntry){
// get file / blob
fileEntry.file(function(file) {
// read file
var reader = new FileReader();
reader.onload = function(event) {
var dataUrl = event.target.result;
// create new audio object with data url
// e.g. <audio src="dataUrl" />
};
reader.readAsDataURL(file);
// handle error
} , onError);
// handle error
}, onError);
}
// Opening a file system with temporary storage
window.requestFileSystem(TEMPORARY, 1024*1024 /*1MB*/, onFS, onError);
(I'd like to also mention, I've never used the File System API, but it seems promising)