0

Estou tentando implementar um player de musica utilizando javascript, que funciona com o upload de um arquivo de áudio(.mp3), no script quando ocorre o upload do arquivo, que ocorre com o evento 'onload' a função criada tem a variável 'files' e depois tocar o arquivo. Como o arquivo é tocado se não aparentemente referencia a variável que recebe o arquivo 'file'?

HTML

<div id="content">
    <input type="file" id="thefile" accept="audio/*" /> 
    <audio id="audio" controls="controls"></audio> 
</div>

Javascript

window.onload = function() {

    var file = document.getElementById("thefile");
    var audio = document.getElementById("audio");


    file.onchange = function() {
        var files = this.files;
        audio.src = URL.createObjectURL(files[0]);
        audio.load();
        audio.play();
    }

};   

Grato desde já.

1 Resposta 1

2

Modifiquei o id do seu elemento de áudio e do file pra não confundir sua variável com o elemento em si.

<div id="content">
  <input type="file" id="arquivo" accept="audio/*" /> 
  <audio id="musica" controls="controls"></audio> 
</div>

var musica = document.getElementById("musica"); 
var arquivo = document.getElementById("arquivo");

Você armazena na variável musica o elemento de áudio([object HTMLAudioElement]) do seu documento, e na arquivo e elemento file, e não o arquivo importado.

O que acontece é que toda vez que acontece uma mudança no file, você armazena uma lista de arquivos na var files usando o .files, e você passa o primeiro elemento files[0] para a src do elemento áudio, nesse trecho.

var files = this.files;
musica.src = URL.createObjectURL(files[0]);

Quando você da o play na variável musica, você está dizendo para reproduzir o elemento audio, que contém a nova src do file importado.

Mais informações sobre essa mudança do src: https://developer.mozilla.org/pt-BR/docs/Web/API/URL/createObjectURl

Mais informações sobre o input file: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file

Você pode observar a mudança do src do elemento áudio inspecionado a página(crtl + shif + i no Chrome) e importando um novo arquivo.

Espero que ajude!

2
  • obrigado pela explicação, ajudou mto, mas minha duvida persiste na parte do papel desempenhado pela variável files.
    – jaojpaulo
    8/01/2018 às 19:39
  • Editei a resposta com a explicação do files
    – Dobrychtop
    9/01/2018 às 10:32

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 .