Upload and Play Audio File JS

I have an HTML audio tag and an HTML file input tag, as shown below. I'd like users to use the Upload File button to select a song from their computer, then play it using the audio tag.

<audio id="audio">
    <source src="" id="thesource" />
</audio>
<input type="file" id="upload" title="Upload File" />

How do I let users upload audio files from their computer and play it? This must be done locally, as it is being used in a downloadable web app I am creating.

EDIT: The original question I had was how to turn an image uploader that worked and was cross-browser into an audio uploader. Long ago, after lots of hard work and rediscovering past projects, I developed a way to do so. Now, nearly a year after I originally asked this question, I feel stupid for not realizing that answer earlier. I posted the answer down below for any people who also need this.

Answers:

Answer

I originally said there was no answer -- I was wrong. I have found the answer.

function handleFiles(event) {
	var files = event.target.files;
	$("#rlly").attr("src", URL.createObjectURL(files[0]));
	document.getElementById("rllly").load();
}

document.getElementById("rll").addEventListener("change", handleFiles, false);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="rll" />
<audio id="rllly" controls>
  <source src="" id="rlly" />
</audio>

This does exactly what I wanted -- it allows uploading of any audio file and plays it. Wow! I answered my own question! Try uploading any music on your computer in the snippet.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.