Loading a new file into an audio element in HTML

Question

I've been developing a web application that allows the user to stamp and mark certain portions of an mp3 to play from, and as part of that application, I need to allow the user to load new files that can then be played in the browser. I've been trying this with the file and audio elements in HTML, but I can find a way to make the new selected file actually become the new source of the audio element. For example, I tried:

<audio id="song" controls>
  <source src="C:\Users\dalzinm\Downloads\Jaco.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

<input type="file" id="myFile" name="theFile"/>

<script>

var input = document.getElementById("myFile");
input.onclick = function ()
{
    this.value = null;
};

input.onchange = function ()
{
    var song = document.getElementById("song");
    song.pause();
    song.src=input.value;
    song.load();
    song.play();
};

</script>

But this seems to give me an error and I'm now sure how else I could go about doing it. Any help would be greatly appreciated, thanks!

The code just doesn't function. (I've been using notepad++ to edit, going to switch to netbeans today.) — Mitchell Dalzin, Nov 22 '16 at 14:38

score 0 · Answer 1 · edited May 23 '17 at 12:30

0

You can't just use a local url as a source. Instead you can use a readURL function as in this article.

edited May 23 '17 at 12:30

Community

1
1

answered Nov 21 '16 at 16:20

Bru Mas Ribera

1
2

Loading a new file into an audio element in HTML

1 Answers1