How to load a file into a html5 audio tag -

how load audio file <input type="file"> tag audio tag? have tried :

<input type="file" id="file"></input> <script> var file = document.getelementbyid("file"); var audio = document.createelement("audio"); audio.src = file.value; document.write(audio) </script> 

i believe satisfy needs. first, file input needs bound via javascript or jquery (if prefer). can use blob ^{browser support}

the following basic example;

<input type="file" id="file"></input> <audio id="audio" controls autoplay></audio> 

we bind #file changes using addeventlistener below

// check bloburl support var blob = window.url || window.webkiturl;     if (!blob) {         console.log('your browser not support blob urls :(');         return;                }  document.getelementbyid('file').addeventlistener('change', function(event){          consoleprint('change on input#file triggered');         var file = this.files[0],          fileurl = blob.createobjecturl(file);         console.log(file);         console.log('file name: '+file.name);         console.log('file type: '+file.type);         console.log('file bloburl: '+ fileurl);         document.getelementbyid('audio').src = fileurl;  }); 

or other hand, here's nice , more interactive example created

<iframe style="height:600px;width:102.7%;margin:-10px;overflow:hidden;" src="//jsfiddle.net/adamazad/0oy5moph/embedded/result,js,html,css/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>