使用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

你在這裏。我只在最新版Chrome中測試過它，但它應該可以在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>

編輯被全部完成：當保存爲HTML文件時，它必須通過本地或遠程的Web服務器訪問。直接打開html文件時，HTML5文件閱讀器看起來不起作用。

我發表了一個副本http://jsfiddle.net/KY8Kg/

來源

2012-04-29 20:43:26

謝謝！但是我想「保存」它，因此播放列表中前面的其他歌曲完成後可以播放它嗎？必須可以保存許多歌曲供以後播放。我希望能夠在播放列表中放置一張專輯，然後播放每首歌曲。就像使用Windows Media Player一樣。這可能嗎？ – Lasse

這是可能的相同的代碼，檢查出新的http://jsfiddle.net/KY8Kg/6/這次你可以在瀏覽對話框中選擇多個文件，選擇多個文件，或多次打開框選擇多個文件，並將它們排隊 –

值得一提的是，拖放功能與瀏覽對話框相同，因此您可以多次將D＆D添加到列表中 –

使用HTML5在瀏覽器中創建音頻文件API

回答

相關問題