Using local file as <audio> src

Question

Is it possible to use an audio file from the user's hard drive as the src attribute for an HTML5 <audio> tag? Maybe through an <input type="file" />? This might not be particularly useful in production, but I'm still curious if it can be done.

Solution

I can think of two ways.

Within your audio tag:

src="file:///C:/.../file.mp3"

or you could use a Blob using the file API.

HTML:

<input type="file"></input>

JS:

audio.src = URL.createObjectURL(document.getElementsByTagName('input')[0].files[0]);

Comments

[Rob Allsopp]

nice, the file API method worked like a charm for me!

[Paul Martin]

also of note. If you want to change the audio tag every time the file changes, there is an 'change' event for the input tag. that will fire every time you change the file in the input tag.

[Alex McMillan]

I just get Not allowed to load local resource. Stupid damn security. Surely feeding an .mp3 directly into the src of an audio element should be supported?

[Marcel]

@AlexMcMillan It should not. Or else, a random script your browser loads, could play through your music collection at once.