Search code examples
javascripthtml5-audio

Using local file as <audio> src


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]);