1

I am making a browser based audio player. So for making a playlist from the local directory I am using :

<input type="file" id="getFile" />

Then I am using a button to confirm the playlist.On clicking the button I am calling a javascript function to change the src of the audio tag to play the new audio file selected in the playlist. I want the exact path of the file from the input file to run in the HTML5 audio player but it starts taking the path as C://Fakepath/filename.mp3. Can someone help me with this.

putvande
  • 15,068
  • 3
  • 34
  • 50
user1580096
  • 487
  • 1
  • 7
  • 17
  • 1
    [Bad news](http://stackoverflow.com/questions/4851595/how-to-resolve-the-c-fakepath) – Chris Forrence Aug 15 '13 at 13:50
  • 1
    A website has no business knowing my directory layout, thankyouverymuch. – millimoose Aug 15 '13 at 13:51
  • So will I be able to play the selected file in the browser somehow or through any other alternative as this is a local application. – user1580096 Aug 15 '13 at 13:52
  • 1
    @user1580096 Sure, use `FileReader`'s [`toDataURL`](https://developer.mozilla.org/en-US/docs/Web/API/FileReader#readAsDataURL()) to convert the file contents into a base64-encoded data URL and use that as the audio `src`. – apsillers Aug 15 '13 at 13:54
  • 1
    @apsillers, post answers in the answer box, please :-) – Brigand Aug 15 '13 at 13:56

2 Answers2

16

This is a security feature, by design. You should not be able to read the original file path of a file input into a browser form. File input is for reading file contents only, not metadata like path on the user's file system.

The good news is that you don't need the original file path. You can use FileReader's readAsDataURL to convert the file contents into a base64-encoded data URL and use that as the audio src. To read from #myUploadInput and output through #myAudioElement (also available as a working fiddle):

var reader = new FileReader();

reader.onload = function (event) {
    document.getElementById("myAudioElement").src = event.target.result;
};

reader.readAsDataURL(document.getElementById("myUploadInput").files[0]);
apsillers
  • 112,806
  • 17
  • 235
  • 239
  • any idea why even this isn't working on localhost? the source gets set as *src="C:\fakepath\filename.jpg"* but console.logging the image element says the src is a dataURL – galki Aug 18 '15 at 06:51
  • answer: backbone rerendering :/ – galki Aug 18 '15 at 07:19
-1

if the user is 'building' / creating the playlist based on files they have locally you could do a 'browse' field (s) where they select the local audio files, then take the contents of the field (that Should include the paths to those images), build an array of the count/id, filename.mp3, and path... then, based on what is 'chosen' to play, just reassemble the full local path and play that file.

that would be an approach I would take anyway to see if it would work. the necessary piece here is getting the user to disclose the paths to the audio files... but Im still not 100% sure it would work given the security feature that the earlier commenter posted a link to.

if this were included in an application the user approved for local installation you could just refer to it using the 'application directory' and copy the file to that 'safe location' but since its web based it just really opens up a whole can of worms in terms of a potentially unapproved / authorized web function knowing your local directory structure. good luck, let me know if you find a solution.

tamak
  • 1,541
  • 2
  • 19
  • 39
  • We have a [File API](http://www.w3.org/TR/FileAPI/) for exactly this sort of thing, no need to go hacking around in the user's filesystem. – robertc Aug 15 '13 at 14:36
  • @robertc - not at all recommending / advising "hacking around in the user's filesystem" -- he mentioned "making a playlist from the local directory" which implies the user is selecting the local files to add to the playlist, so its the user 'adding' songs and thereby disclosing the location of the audio files for playback. – tamak Aug 15 '13 at 16:27
  • But as you can see from the question, where he's getting `fakepath` the user is *not* disclosing the location of the audio files. – robertc Aug 15 '13 at 17:25