JavaScript FileReader using a lot of memory

Question

I have a problem with my little project. Every time the music player is loading new songs into playlist or you are pressing a song on the list to get it playing, it's using a lot of memory, and it stays high until you shut it down. I think its every time I'm using the filereader API that it uses memory, but I'm also loading ID3 information with the jDataView.js script which I also think is taking a lot of memory.

Do you guys have any suggestion, to load,store and play songs with the FileReader, without taking up memory? I've tried to see if it was possible to clear the fileReader after using, but I couldn't find anything. I've only tested in Chrome.

UPDATE: I have tested my project,and found out, that its when im trying to load the datastring it takes up memory.

reader.onloadend = function(evt) {
    if(typeof(e) != "undefined"){
        e.pause();
    }
    e = new Audio();
    e.src = evt.target.result; // evt.target.result call takes the memory
    e.setAttribute("type", songs[index]["file"].type);
    e.play();
    e.addEventListener("ended", function() { LoadAudioFile(index + 1) }, false);
};

Is there another way to load the data into the audio element?

When you have such a problem, the first thing to do is to see where the memory is used. Have a look at Chrome's memory profiler : developers.google.com/chrome-developer-tools/docs/… — Denys Séguret
– Denys Séguret, Commented May 2, 2012 at 12:23

Boaz · Accepted Answer · 2012-12-09 13:11:02Z

11

This is not because of FileReader but because you are making the src attribute of audio element a 1.33 * mp3filesize string. So instead of the src attribute being a nice short url pointing to a mp3 resource, it's the whole mp3 file in base64 encoding. It's a wonder your browser didn't crash.

You should not read the file with FileReader at all, but create a blob URL from the file and use that as src.

var url = window.URL || window.webkitURL;

//Src will be like "blob:http%3A//stackoverflow.com/d13eb575-4863-4f86-8727-6400119f4afc"
//A very short string that is pointing to the original resource in hard drive

var src = url.createObjectURL( mp3filereference );

audioElement.src = src;

edited Dec 9, 2012 at 13:11

Boaz

20.3k9 gold badges68 silver badges74 bronze badges

answered May 2, 2012 at 13:33

Esailija

140k24 gold badges280 silver badges328 bronze badges

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

8 Comments

charmixer Over a year ago

But when im using this method, the file needs to be on the server, right? This will take up alot of space to store each file for every user who using it. Isn't it possible to store the file in the browser?

Esailija Over a year ago

@QuakeDK no, this is for local files on users computer, mp3filereference is equal to songs[index]["file"] in your code. If this were from a server, one would just use src from the server without reading any files at all..

Esailija Over a year ago

@QuakeDK I think I understand what you mean now, no it doesn't place the file on any server, it creates a blob url that points to the file in users computer. It's the modern version of file:/// urls.

charmixer Over a year ago

Wauw, now its blazing fast! :D Thanks!

Esailija Over a year ago

@QuakeDK around here we say thanks by accepting answers and upvoting them ;)

|

Collectives™ on Stack Overflow

JavaScript FileReader using a lot of memory

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related