Set audio src using local file dynamically

Question

In Firefox, I'm trying to load an audio file from the user's file system.
I've read that I can create a File object based on a path here
The code will be run inside a firefox addon, so have access to privilaged code.

Any ideas why this is causing an error in console and for the document.getElementById('player') element to vanish?

http://jsfiddle.net/bobbyrne01/sp5qr7hh/

^ fiddle is just for demonstration purposes, it will ultimately be run inside a firefox addon.

html ..

<audio id="player" preload="auto" controls></audio>

js ..

var reader = new FileReader();
reader.onload = function(d) {
    console.log(d.target.result);
    document.getElementById('player').src = d.target.result;
};
reader.readAsDataURL(new File([""], "file:///home/rob/audio.mp3"));

console output ..

"data:application/octet-stream;base64," _display:24
HTTP "Content-Type" of "application/octet-stream" is not supported. Load of media resource data:application/octet-stream;base64, failed.

filesystem ..

rob@work:~$ pwd
/home/rob
rob@work:~$ ls audio.mp3 
audio.mp3

What's causing the spew -- the FileReader's attempt to load the file, or the — amphetamachine, Jan 20 '15 at 15:19
Also, have you tried using the recommended HTML5 `` structure? — amphetamachine, Jan 20 '15 at 15:20
@amphetamachine `document.getElementById('player').src = d.target.result;` was causing the error. @MelanciaUK do you mean `application/octet-stream`? — bobbyrne01, Jan 20 '15 at 17:41

score 0 · Accepted Answer · answered Jan 20 '15 at 15:29

0

Is you utilize the recommended HTML5 DOM structure for <audio> tags, it should work:

var sourceElem = document.createElement('source');
sourceElem.setAttribute('src', "file:///home/rob/audio.mp3");
document.getElementById('player').appendChild(sourceElem);

I got the jsfiddle to give me a security error saying it shouldn't load local resources.

answered Jan 20 '15 at 15:29

amphetamachine

27,620
12
60
72

I would really like to utilize `FileReader()` to load the audio file, since i'll then be using [JavaScript-ID3-Reader](https://github.com/aadsm/JavaScript-ID3-Reader#file-api) to read id3 data from the file – bobbyrne01 Jan 20 '15 at 17:40

score 0 · Answer 2 · answered Jan 20 '15 at 16:47

0

Loading local files from via a remote website is a security issue. You'd also have to detect what system the user is using in order to get the proper file structure. Most browser prevent this sort of behavior, as you shouldn't be able to read any random file on a user's computer unless they put it in an upload form.

Your users would essentially have to run your site from a local copy (similar to a local webapp on iOS)

answered Jan 20 '15 at 16:47

CJT3

2,788
7
30
45

Your points are valid, I should have noted earlier in the question that the code is run inside a `Firefox addon`, so have access to privilaged code to determine platform etc. – bobbyrne01 Jan 20 '15 at 17:29

Set audio src using local file dynamically

2 Answers2