How to know that the file has reached the end with FileReader ()?

Navigation
2

I am making a system that when the file has just been read opens the next file, the files are MP3 and wanted to play a sequence of songs whenever one is finished. How to do this with FileReader ()?

I tried reader.onloadend = (function() {}); but it did not work, once the file is loaded it already executes the function, I need it to run only when it finishes being read ...

Code so far: 

<input type="file" id="file" multiple="multiple">
<button id="openNewSessionButton" disabled>Open New Room</button><br />
<script>
var connection = new RTCMultiConnection('stream');
connection.session = {
    audio: true,
    oneway: true
};

// connect to signaling gateway
connection.connect();

// open new session
$("#openNewSessionButton").click(function() {
    connection.open();
});

$("#file").change(function() {
var fileA = this.files[0];
var fileB = this.files[1];
readFile3(fileA);
});

function readFile3(file){
    var file1 = URL.createObjectURL(file);
    var context = new AudioContext(),
        buffer;

    var playAudioFile = function (buffer) {
        var source = context.createBufferSource();
        source.buffer = buffer;
        source.connect(context.destination);
        source.start(0); // Play sound immediatel
        var destination = context.createMediaStreamDestination();
        source.connect(destination);

                        connection.attachStreams.push(destination.stream);
                        connection.dontAttachStream = true;
                        $("#openNewSessionButton").removeAttr('disabled');



            var current2 = source.buffer.duration;
            var n = Math.floor(current2);
            var b = n * 1000;

            var timer = setTimeout(function(e) {

            readFile3(fileB); //THIS LINE ? IS CORRECT ?

            }, b);
    };

    var loadAudioFile = (function (url) {
        var request = new XMLHttpRequest();

        request.open('get', file1, true);
        request.responseType = 'arraybuffer';


        request.onload = function () {
                context.decodeAudioData(request.response, function(incomingBuffer) {

                        playAudioFile(incomingBuffer);

                     }
                );
        };

        request.send();

    }());
</script>
    
asked by anonymous 12.06.2014 / 07:50

2 answers

0

I was able to get results and I'm working on the system, the error was very simple, I was trying to run the readFile3 () function; with the variable not set, I just needed to put the function inside $ ("# file"). change (); where the variable was set, thus: 

<input type="file" id="file" multiple="multiple">
<script>

var connection = new RTCMultiConnection('stream');
connection.session = {
    audio: true,
    oneway: true
};


// connect to signaling gateway
connection.connect();


$("#file").change(function() {

$(this).attr('disabled','disabled');

var fileA = this.files[0];
var fileB = this.files[1];
readFile3(fileA);


function readFile3(file){
    file1 = URL.createObjectURL(file);
    var context = new AudioContext(),
        buffer;

    var playAudioFile = function (buffer) {
        var source = context.createBufferSource();
        source.buffer = buffer;
        source.connect(context.destination);
        source.start(0); // Play sound immediatel
        var destination = context.createMediaStreamDestination();
        source.connect(destination);

                        connection.attachStreams.push(destination.stream);
                        connection.dontAttachStream = true;
                        connection.open();


            var current2 = source.buffer.duration;
            var n = Math.floor(current2);
            var b = n * 1000;

            var timer = setTimeout(function(e) {

            connection.close();
            readFile3(fileB);
            $("#result").html("TRANSMITINDO 2");

            }, b);
    };

    var loadAudioFile = (function (url) {
        var request = new XMLHttpRequest();

        request.open('get', file1, true);
        request.responseType = 'arraybuffer';


        request.onload = function () {
                context.decodeAudioData(request.response, function(incomingBuffer) {

                        playAudioFile(incomingBuffer);

                     }
                );
        };

        request.send();

    }());
};
});
</script>

The song is a Timeout with the mp3 tempo, as explained here: link

    
15.06.2014 / 00:59
1

There is a difference between load and run .

I believe you have already successfully loaded all the files, in sequence, into memory. The functionality of FileReader ends there; the JavaScript will have access to the bits of the files chosen by the user.

The next step, which is effectively running these files, is where you are having difficulties. And the news is not good. Even if you used the correct event (which by the way is onended() , in your% Audio_Buffer, as in the code that follows), it seems that it is not very well implemented in browsers yet. A feather! Here's the change for you to try: 

// Import callback function that provides PCM audio data decoded as an audio buffer
context.decodeAudioData(e.target.result, function (buffer) {
    // ...
    // Aqui vai a modificação:
    buffer.onended = function(){
        console.log("Uma música acabou... Iniciar a próxima?");
    }
    // ...
});

If by a miracle this works, it would be good to report back to the rest of the staff to know what is already implemented, and in what browser:

    
13.06.2014 / 18:25
Association between 2 tables Text alignment in sharepoint