Store result of type ArrayBuffer in an array in Javascript

Question

I am using the HTML5 FileReader and File API to make a offline music player. This also includes a basic playlist feature.

Now, when the user selects multiple files, I am retrieving those files as an ArrayBuffer.

Problem is, I want to store these returned files into a normal array so that they can be used in the playlist later.

How can I achieve that in Javascript?

function load_files(){
    var files = document.getElementById('file').files;
    var k = files.length;
    for (var i = 0; i < k; i++) {
        var reader = new FileReader();
        reader.onload = function(e) {
            playlist[i] = this.result;
        };
        reader.readAsArrayBuffer(this.files[i]);
        alert(song_counter); 
        initSound(playlist[song_counter]);
    }
}

Kristian Barrett · Accepted Answer · 2014-02-28 18:13:34Z

1

You cannot just store an ArrayBuffer in an array and re-read the file from it. The buffer is used to load a fixed length of bytes and keep them coming so that you don't run out of bytes to play.

Instead you should read all the bytes from the ArrayBuffer into a byteArray and store the byteArrays in an array. You can then replay all the songs from the byte arrays.

If you already have the songs locally (since your question doesn't state where you get the files from) you can just store the path to the file and then reload the file from that.

I hope this makes sense.

answered Feb 28, 2014 at 18:13

Kristian Barrett

3,7924 gold badges28 silver badges44 bronze badges

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

1 Comment

Kanishka Ganguly Over a year ago

I figured out how to make it using a normal array. Basically, I used readAsDataURL and saved each return result in a normal array. Thanks! :)

Collectives™ on Stack Overflow

Store result of type ArrayBuffer in an array in Javascript

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related