3

Estou trabalhando em um player de áudio e preciso saber como calcular a duração de várias MP3 que são selecionadas na máquina do usuário por um input do tipo file?

EDIT:

Segue meu código atual e que não retorna o valor correto...

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 + ")");
});

Estou tentando usar um loop for com uma variavel somando todas as mp3 mas não dá certo, ele retorna "0" como resultado...

JSFiddle

2
  • 1
    Aparentemente só é possível ler a duração depois que o áudio foi injetado na src da tag <audio>. Testei algumas bibliotecas para ler o ID3 que permitem ler as propriedades de cada this.files[i], mas muitas vezes a informação Length não consta do arquivo MP3.
    – brasofilo
    Commented 10/09/2014 às 22:42
  • Tinha pensado em responder, mas como o Tony já matou a charada, deixo os links da minha pesquisa: 1, 2, 3, 4, 5
    – brasofilo
    Commented 13/09/2014 às 20:08

3 Respostas 3

2
+50

O loademetadata é um evento, por isto você quase conseguiu: ele vai sendo chamado e você precisa incrementar uma variável para armazenar o Tempo Total e atualizar a interface com usuário a cada vez que o evento ocorrer.

Talvez a melhor forma seja ligar esta variável ao HTML, usando AngularJS.

JSfiddle com código em 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>

Código

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;
});
2
  • estranho, ele soma só a duração da última música...
    – Alan PS
    Commented 13/09/2014 às 17:51
  • Renomeei as variáveis, para melhor leitura. Atualizei a resposta. Agora ficou funcionando corretamente.
    – Tony
    Commented 13/09/2014 às 18:58
1

Em html5 existe a propriedade duration

No seu caso ficaria algo parecido com:

duracao = audioElement.duration

Lembrando que o retorno vai ser em segundos!

Para converter de segundos para minutos/horas eu uso o módulo moment.

segue código:

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();
4
  • na verdade é para calcular a duração de várias mp3 ao mesmo tempo!!! estou tentando usar um loop for com uma variavel somando todas as mp3 mas não dá certo...
    – Alan PS
    Commented 13/09/2014 às 16:14
  • "não dá certo" é muito vago, um loop funcionaria perfeitamente, na realidade não tem muitas alternativas, você vai precisar caminhar dentro de um loop pegando o duration de cada mp3, no fim das contas você vai ter uma soma total de todos os arquivos selecionados em segundos, ai é só converter para horas/minutos
    – ederwander
    Commented 13/09/2014 às 16:52
  • 1
    eder, o problema é que o duration só está disponível depois que um elemento de áudio foi setado com um src, o loop new Audio + setAttribute na resposta do Tony.
    – brasofilo
    Commented 13/09/2014 às 20:12
  • Boa @brasofilo na verdade eu não tinha notado que estava faltando o new Audio no código do @aps ...
    – ederwander
    Commented 13/09/2014 às 21:44
1

Para analizar a duração do arquivo MP3, o modo mais fácil (e talvez até eficiente), é iterar em todos os arquivos selecionados, ler seus conteúdos e interpretar o cabeçalho de arquivo.

Leitura dos Dados

Seja file do tipo File, você pode ler dados do seguinte modo:

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);

Interpretação do Header

Agora ou você constrói um parser ou utiliza um que ja existe. Recomendo o mp3-parser. Após ter feito a referência ao JS baixado, utilize:

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

Agora, basta examinar a variável tags para obter todas as informações desejadas.

Juntando...

O código para interpretar um único arquivo então ficará semelhante a:

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);

A análise da variável tags e a integração do código proposto com o código da questão ficam como exercício ;D

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .