Menu
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.
945
The src attribute specifies the location (URL) of the audio file.
The <source> element allows you to specify alternative audio files which the browser may choose from. The browser will use the first recognized format. The text between the <audio> and </audio> tags will only be displayed in browsers that do not support the <audio> element.
Linking to a sound file using a href allows a browser to open and play an audio file if the viewer of your web page has properly configured their Internet browser. You can also use the <embed> tag or the newer <audio> tag to insert a sound file directly into a web page.
You can change the audio file of the HTML5 player with just one line of JavaScript code that you can see below: document. getElementById("my-audio"). setAttribute('src', 'AUDIO_SRC_FILE');
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]);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
