オーディオファイルのアップロードと再生Javery

Question

以下に示すように、HTMLオーディオタグとHTMLファイル入力タグがあります。私は、ユーザーがアップロードファイルボタンを使用してコンピュータから曲を選択してから、オーディオタグを使用して再生するようにしたいと思います。

ユーザーがコンピュータからオーディオファイルをアップロードして再生できるようにするにはどうすればよいですか？これは、私が作成しているダウンロード可能なWebアプリケーションで使用されているため、ローカルで行う必要があります。

そして、 "世論" のために、私は私が試した何かが表示されます：もちろん

function handleFileSelect(evt) { 
 
    var files = evt.target.files; // FileList object 
 

 
    // Loop through the FileList and render image files as thumbnails. 
 
    for (var i = 0, f; f = files[i]; i++) { 
 

 
     // Only process image files. 
 
     if (!f.type.match('image.*')) { 
 
     continue; 
 
     } 
 

 
     var reader = new FileReader(); 
 

 
     // Closure to capture the file information. 
 
     reader.onload = (function(theFile) { 
 
     return function(e) { 
 
      // Render thumbnail. 
 
      var span = document.createElement('span'); 
 
      span.innerHTML = ['<img class="thumb" src="', e.target.result, 
 
          '" title="', escape(theFile.name), '"/>'].join(''); 
 
      document.getElementById('list').insertBefore(span, null); 
 
     }; 
 
     })(f); 
 

 
     // Read in the image file as a data URL. 
 
     reader.readAsDataURL(f); 
 
    } 
 
    } 
 

 
    document.getElementById('files').addEventListener('change', handleFileSelect, false);

を、HTML5ロックスから、このコードは、画像のみで動作します。私がこれを得たURLはhttps://www.html5rocks.com/en/tutorials/file/dndfiles/（Reading Filesセクション）です。これをイメージアップローダーからオーディオに変換する方法はありますか？

私はこれに変換しようとした：

function handleFiles(event) { 
 
\t var files = event.target.files; 
 
\t var reader = new FileReader(); 
 
\t reader.onload= function(tfile){ 
 
\t \t return function(e) { 
 
\t \t \t alert("Loaded " + tfile.name); 
 
\t \t \t $("#rlly").attr("src", e.target.result); 
 
\t \t } 
 
\t } 
 
\t reader.readAsDataURL(0); 
 
} 
 

 
document.getElementById("rll").addEventListener("change", handleFiles, false);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="file" id="rll" /> 
 
<audio> 
 
    <source src="" id="rlly" /> 
 
</audio>

しかしながら、これは読者のパラメーター0がブロブないというエラーを返します。

Answer 1

私はもともと答えがないと言っていました。私は間違っていました。私は答えを見つけました。

function handleFiles(event) { 
 
\t var files = event.target.files; 
 
\t $("#rlly").attr("src", URL.createObjectURL(files[0])); 
 
\t document.getElementById("rllly").load(); 
 
} 
 

 
document.getElementById("rll").addEventListener("change", handleFiles, false);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="file" id="rll" /> 
 
<audio id="rllly" controls> 
 
    <source src="" id="rlly" /> 
 
</audio>

これは私が望んでいたまさにありません - それは、任意のオーディオファイルのアップロードを可能にし、それを果たしています。うわー！私は自分の質問に答えました！スニペットでコンピュータ上の音楽をアップロードしてみてください。

Answer 2

これはあなたがreadAsDataURL

function handleFiles(event) { 
 
\t var files = event.target.files; 
 
\t var reader = new FileReader(); 
 
\t reader.onload= function(tfile){ 
 
\t \t return function(e) { 
 
\t \t \t alert("Loaded " + tfile.name); 
 
     
 
     var source = document.createElement("source"); 
 
\t \t \t \t \t source.src = reader.result; 
 
\t \t \t \t \t source.type = files[0].type; 
 
     $("#rlly").append(source); 
 
      
 
     console.log(files[0].type) 
 
     console.log($('audio')[0]); 
 
     $('audio')[0].play(); 
 
\t \t }() 
 
\t } 
 
\t reader.readAsDataURL(files[0]); 
 
} 
 

 
document.getElementById("rll").addEventListener("change", handleFiles, false);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="file" id="rll" /> 
 
<audio id="rlly"> 
 
</audio>