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,
- user chooses an mp3 file on their computer using the browse button on the input element.
- 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:
- Copied an mp3 to my web server.
- 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:
- Upload Mp3 from local to a server on the web - such as dropbox.
- 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.