1

I am new to the Web Audio and File Api's and am stuck right near the beginning.

My use case is as follows: There is an audio element and an Input=file element on the page,

  1. user chooses an mp3 file on their computer using the browse button on the input element.
  2. The file path and name is bound to the audio element as the source and the Mp3 plays.

I expected to find many recipes for this on the web but apparently this is not a common use case.

I started experimenting and first tried:

  1. Copied an mp3 to my web server.
  2. Hard coded the url (ex: .../wwwroot/mySong.mp3) into the audio element. This worked!!! proved the audio element works.

Next I replaced the url with one from local computer. (ex: E:\....\mySong.exe) This is bad. I see the url in the browser is marked unsafe and does not play.

I searched more on the web and saw a similar case but with an image. This led to the following code - converted to use audio:

var objectURL = window.URL.createObjectURL(selectedSong.files[0]);

Then I bind the obJectUrl to the audio source.

This fails too. It is marked as an unsafe:blob. While this may work for an image I don't think the audio element knows what to do with it.

At this point I conclude that this simple use case is not possible.

Question #1: Am I correct in my conclusion? And if not how can I accomplish this simple use case.

I got to thinking about my real world experiences with mp3 files on the web. The use case I usually see is:

  1. Upload Mp3 from local to a server on the web - such as dropbox.
  2. Connect to the server and click on the link. The mp3 plays.

In this case I am not listening to the file on my local computer but am listening to the version on the server.

Question #2 Is this the correct way to solve my problem? So after the user selects the file I send it to the server and then play back a link from there. If that is right how do I get started implementing this?

In my case the delay imposed by first uploading the file is acceptable for my web app but I would like to minimize the delay. This made me wonder if HTML local storage is an option for what I want to do. I am thinking it would be more efficient to copy the local mp3 file to the browser's local storage and play the version there.

Question #3: Is local storage a possible more efficient way to accomplish my purposes? And if so how?

Thanks in advance. Also this is my first ever post here so please let me know if I inadvertently violated any of the written or unwritten rules.

Bob
  • 53
  • 5
  • You can use the `FileReader` to read the contents of the file. As seen in [this so-answer](http://stackoverflow.com/a/38266479/5516238) – schroffl Nov 06 '16 at 21:24

0 Answers0