HTML5ファイルAPIを使用したブラウザでのオーディオリストの作成

HTML5でミュージックプレイヤーを作成することはできません。私はすでにかなり簡単だったデスクトップからドラッグアンドドロップファイルを作成しました。今は曲名の入った順番のないリストを作成していますが、その曲を取り込む方法はわかりませんので、ユーザーがそれを押すと再生されます。それは素晴らしい作品HTML5ファイルAPIを使用したブラウザでのオーディオリストの作成

var dropbox = document.getElementById("dropbox") 
dropbox.addEventListener("drop", function (evt) { 
      evt.preventDefault(); 
      evt.stopPropagation(); 

      var files = evt.dataTransfer.files; 
      for (var i = 0, f; f = files[i]; i++) { 
       var li = document.createElement('li'); 
       li.innerHTML = "<li>" + escape(f.name) + "</li>"; 
       document.getElementById('songs').appendChild(li); 
      } 

      console.log("Dropped File"); 
     }, false);

、ちょうど次のステップを取るためにいくつかの助けを必要とする：

は、これは私がこれまで持っているものです。私は、ファイルを再生する前にサーバーにアップロードする必要があると考えていますが、スペースを取らず、ブラウザウィンドウが開いているときに解決策がある場合は素晴らしいでしょう。

提案がありますか？

出典

2012-04-29 Lasse

ここに行きます。私は最新のクロムでテストしただけですが、IE9、FF3.6 +、Safariで動作するはずです。

これは、HTML5ファイルリーダーやオーディオプレーヤーを使用し、すべてこの1つのHTMLファイル

基本はhttps://developer.mozilla.org/en/DOM/FileReaderからのものであり、http://www.w3.org/2010/05/video/mediaevents.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
    <head> 
     <title>Audio Player Test</title> 
     <script type="text/javascript"> 
      function SelectAudio(files) { 
       var file = files[0]; 
       if (file.type.match(/audio.*/)) { 
        var reader = new FileReader(); 
        reader.onload = function(d) { 
         var e = document.createElement("audio"); 
         e.src = d.target.result; 
         e.setAttribute("type", file.type); 
         e.setAttribute("controls", "controls"); 
         e.setAttribute("autoplay", "true"); 
         document.getElementById("container").appendChild(e); 
        }; 
        reader.readAsDataURL(file); 
       } 
      } 
     </script> 
    </head> 
    <body> 
     <input type="file" onchange="SelectAudio(this.files)" /> 
     <div id="container"></div> 
    </body> 
</html>

EDITで行われます：HTMLファイルとして保存する場合は、ローカルまたはリモートのWebサーバーを介してアクセスする必要があります。 HTML5ファイルリーダーは、htmlファイルを直接開くときには動作しません。

私はhttp://jsfiddle.net/KY8Kg/に投稿を送りました

出典

2012-04-29 20:43:26

ありがとうございました！しかし、私はそれを "保存"したいので、プレイリストの前の他の曲が再生されたときに再生できますか？後で演奏するために多くの曲を保存することが可能でなければならない。プレイリストにアルバムをドロップすると、それがすべての曲を再生します。 Windows Media Playerを使用するように。これは可能ですか？ – Lasse

これは同じコードで可能です。新しいhttp://jsfiddle.net/KY8Kg/6/を見てください。今回は、ブラウズダイアログで複数のファイルを選択したり、複数のファイルを選択したり、複数回開いたりすることができます複数のファイルを選択すると、それらがキューに入れられます –

ドラッグアンドドロップはこの目的のためのブラウズダイアログと同じであることに言及する価値があるので、リストに追加し続けるためにD＆Dを複数回行うことができます –

HTML5ファイルAPIを使用したブラウザでのオーディオリストの作成

答えて

関連する問題