Audio API to calculate the duration of multiple songs

Question

I’m working on a player audio and need to know how to calculate the duration of various MP3’s that are selected on the user’s machine by a input of the kind file?

EDIT:

Follows my current code and does not return the correct value...

var audioElement2 = document.createElement('audio');
var fill;
var tamanho = 0;
$("#file666").change(function() {
    fill = this.files.length;


    for (var i = 0; i < fill; i++) {
    file3[i] = this.files[i];

    fileB = URL.createObjectURL(file3[i]);
    audioElement2.setAttribute('src', fileB);

    $(audioElement2).on("loadedmetadata", function () {
    tamanho = tamanho + parseInt(audioElement2.duration);
    });

    }


    $("#musicas").html("Músicas Carregadas: " + fill + " (Tempo Total: " + tamanho + ")");
});

I’m trying to use a loop for with a variable summing all mp3 but it doesn’t work, it returns "0" as a result...

Jsfiddle

Answer 1

The loademetadata It’s an event, so you almost got it: it will be called and you need to increment a variable to store the Total Time and update the user interface each time the event occurs.

Perhaps the best way is to connect this variable to HTML, using Angularjs.

Jsfiddle with code on http://jsfiddle.net/7f6dxt5s/18/

HTML:

<input type="file" id="fileInputSelector" size="60" name="fileInputSelector" multiple>
<div id="musicas">Músicas Carregadas: 0 (Tempo Total: 0 segundos)</div>

Code

var tempoTotal = 0;

$("#fileInputSelector").change(function () {
    var quantidadeDeArquivos = this.files.length;
    for (var i = 0; i < quantidadeDeArquivos; i++) {
        var esteArquivo = this.files[i];
        fileB = URL.createObjectURL(esteArquivo);

        var audioElement2 = new Audio(fileB);
        audioElement2.setAttribute('src', fileB);
        audioElement2.onloadedmetadata = function (e) {
            tempoTotal = tempoTotal + parseInt(this.duration);
            $("#musicas").html("Músicas Carregadas: " + quantidadeDeArquivos + " (Tempo Total: " + tempoTotal + " segundos)");
            //alert("loadedmetadata" + tempoTotal);
        }
    }
    tempoTotal = 0;
});

Answer 2

In Html5 there is the property duration

In your case it would look something like:

duracao = audioElement.duration

Remembering that the return will be in seconds!

To convert seconds to minutes/hours I use the module Moment.

follows code:

var seconds = audioElement.duration;
var duration = moment.duration(seconds, "seconds");

var time = "";
var hours = duration.hours();
if (hours > 0) { time = hours + ":" ; }

time = time + duration.minutes() + ":" + duration.seconds();

Answer 3

To analyze the duration of the MP3 file, the easiest (and perhaps even efficient) mode is to iterate on all selected files, read its contents and interpret the file header.

Data Reading

Be it file of the kind File, you can read data as follows:

var reader = new FileReader();
reader.onloadend = function(evt) {
    if (evt.target.readyState == FileReader.DONE) { // DONE == 2
        // evt.target.result; <-- contém os bytes lidos.
  }
};

var blob = file.slice(start, stop + 1); // start = 0, stop deve ser grande o suficiente.
reader.readAsBinaryString(blob);

Interpretation of the Header

Now either you build a parser or use one that already exists. I recommend the mp3-parser. After referencing the downloaded JS, use:

var tags = mp3Parser.readTags(new DataView(/* bytes do mp3 */));

Now, just examine the variable tags to get all the information you want.

Joining together...

The code to interpret a single file will then look similar to:

var reader = new FileReader();
reader.onloadend = function(evt) {
    if (evt.target.readyState == FileReader.DONE) {
        var tags = mp3Parser.readTags(new DataView(evt.target.result));
        // basta analisar a variável tags.
  }
};

var blob = file.slice(start, stop + 1);
reader.readAsBinaryString(blob);

The analysis of the variable tags and the integration of the proposed code with the issue code is a ;D exercise