上傳和播放歌曲

我試圖上傳和播放歌曲與HTML5。我正在使用JavaScript將文件上傳到服務器和jPlayer播放歌曲，但我遇到了這個插件的問題。上傳和播放歌曲

這是我的代碼：

$(document).ready(function() { 

     $(this) 

     .bind("dragenter", function(event) { 
       return false; 
      }) 

     .bind("dragover", function(event) { 
       return false; 
      }) 

      .bind("drop", function(event) { 
       var file = event.originalEvent.dataTransfer.files[0]; 
      event.preventDefault(); 
       $("#state").html("Loading..."); 
       $.ajax({ 
        url: 'upload.php', 
        async: true, 
        type: 'POST', 
        contentType: 'multipart/form-data', 
        processData: false, 
        data: file, 
        success: function(data) { 
         $("#state").html("Ready!"); 
       $("#player").jPlayer({ 
        ready: function() { 
         $(this).jPlayer("setMedia", { 
          oga: file.name 
         }).jPlayer("play"); 
        }, 
        supplied: "oga" 
       }); 
        }, 
        beforeSend: function(xhr) { 
         xhr.setRequestHeader("X-File-Name", file.name); 
         xhr.setRequestHeader("Cache-Control", "no-cache"); 
        } 
      }); 
      }); 
    });

該文件上傳到服務器上，但jPlayer不打它，我想不通爲什麼...

@vigrond：是我可以！ ;）

<html id = "homepage"> 

    <head> 
     <title>Echo</title> 
     <script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> 
     <script type = "text/javascript" src = "jquery.jplayer.min.js"></script> 
     <script type = "text/javascript" src = "upload.js"></script> 
    </head> 

    <body bgcolor = "black"> 
     <div style = "margin: 0 auto; text-align: center"> 
       <h1 style = "margin-top: 100px; color: white">Drag and drop a song...</h1> 
       <h2 id = "state" style = "color: white"></h2> 
     </div> 
     <div id = "player"></div> 
    </body> 

</html>

來源

2011-12-01 Nikko Hel

你能提供你的HTML嗎？有幾個步驟需要讓jPlayer正常運行，並且正確的HTML元素就是其中之一。您可能還想嘗試設置errorAlerts：true和warningAlerts：true。這通常會通過警報對話框爲您提供有關正在進行的操作的具體信息。 – Vigrond

已編輯！ 7更多去... –

要理解的主要問題是，所有瀏覽器在涉及HTML5音頻支持時的行爲都不相同。（請參閱：http://www.w3schools.com/html5/html5_audio.asp）

這就是爲什麼jPlayer具有閃存備份解決方案的原因。

默認情況下，jPlayer首先嚐試HTML5的解決方案，並回落與此默認設置閃爍：

solution: "html,flash" //Set by default, no declaration necessary

爲了使功能的閃光燈支持，你必須集swfPath包含目錄jPlayer附帶的Jplayer.swf文件。

swfPath: "/js"

此外，jPlayer建議同一文件的至少2個不同版本最大限度地支持HTML5。例如，.ogg和.mp3。

  $("#player").jPlayer({ 
       ready: function() { 
        $(this).jPlayer("setMedia", { 
         oga: "http://www.vigrond.com/jplayerTest/beer.ogg", 
         mp3: "http://www.vigrond.com/jplayerTest/beer.mp3" 
        }).jPlayer("play"); 
       }, 
       supplied: "oga, mp3", 
       swfPath: "/js", 
       solution: "html,flash" 
      });

舉一個例子，我建立了一個測試頁面在這裏的無形jPlayer播放器，與代碼和目錄結構：http://vigrond.com/blog/2011/12/01/invisible-html5-flash-audio-player-using-jplayer/

讓我知道，如果這有助於！

來源

2011-12-01 23:47:07 Vigrond

我知道，重點是我不想在我的網站使用Flash。我正在考慮即時轉換音頻文件，以最大限度地提高跨瀏覽器兼容性。今天我的代碼沒有任何修改，但。猜測昨天我正在測試瀏覽器緩存的舊版本頁面。無論如何，我有另一個問題。上傳腳本適用於Firefox，Chrome和Internet Explorer，但不適用於Safari。當我拖放一個文件，頁面上傳到服務器只有15B，我無法弄清楚爲什麼。任何建議？ –

上傳和播放歌曲

回答

相關問題