Storing and playing local files with JavaScript and HTML5 Audio

Question

I am working on a media player, and I want to be able to queue local files in an array, play it, and even export it as a playlist (for later import).

I found this question, with a lot of helpful information: Using local file for Web Audio API in Javascript However, the Base64 method would make the playlist too big, and the other solution creates a sandboxed file link (which are deleted from the browser when the session is closed).

Is there any good way to do this?

EDIT: Here's an example of what I want:

var playlist = {'file:///home/user/music/track1.mp3','file:///home/user/music/track2.mp3','file:///home/user/music/track3.mp3'};

It doesn't have to look like this, i just want something similar.

You want the files to be saved somewhere ,even when the session is closed? — Nevin
– Nevin, Commented Feb 21, 2014 at 10:55
@NevinMadhukarK I want to reference files on the user's harddisk, so he can make a playlist and load it up again later. — Jacob Pedersen
– Jacob Pedersen, Commented Feb 21, 2014 at 10:56

Community · Accepted Answer · 2017-05-23 12:06:49Z

0

Why not try localstorage feature on html5. Its helps store data even after the session is expired.

http://www.w3schools.com/html/html5_webstorage.asp

http://diveintohtml5.info/storage.html

What i did in my music player,was store the file data path in the localstorage. And whenever i needed it ,i retrieved it and replaced the current song with the one i wanted.

// Store localStorage.setItem("Path","file:///home/user/music/track1.mp3'");

//Retrieve
currentSong=localStorage.getItem('Path');

For multiple songs,u could create objects and do similar to this: Storing Objects in HTML5 localStorage

edited May 23, 2017 at 12:06

CommunityBot

11 silver badge

answered Feb 21, 2014 at 11:04

Nevin

3,3682 gold badges29 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Jacob Pedersen Over a year ago

Will test this out when I get home! Can i export the full localStorage to a file? I could use this to store the whole playlist.

Nevin Over a year ago

You can transfer the entire object file stored in localStorage as JSON format into a file. Do check the last link i provided. That helped me do my project. :) And do accept my answer if it helped you out. :)

Jacob Pedersen Over a year ago

I tried your method ( jsfiddle.net/Tv8Cm/56 ), but I get error "Not allowed to load local resource: file:///file.mp3" When trying to load the file. Is there issues with my code?

Nevin Over a year ago

I think you should check this : stackoverflow.com/questions/10813408/html5-video-not-playing Am 100% sure,the methode i told will work. Just google when u have future doubts. Its all there.

Max Yari Over a year ago

Hi there, can you provide working fiddle or link to your player? As i am pretty sure that you can not really reuse saved file path

|

Collectives™ on Stack Overflow

Storing and playing local files with JavaScript and HTML5 Audio

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related