2011-12-01 211 views
4

我试图上传和播放歌曲与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> 
+0

你能提供你的HTML吗?有几个步骤需要让jPlayer正常运行,并且正确的HTML元素就是其中之一。您可能还想尝试设置errorAlerts:true和warningAlerts:true。这通常会通过警报对话框为您提供有关正在进行的操作的具体信息。 – Vigrond

+1

已编辑! 7更多去... –

回答

0

要理解的主要问题是,所有浏览器在涉及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/

让我知道,如果这有助于!

+0

我知道,重点是我不想在我的网站使用Flash。我正在考虑即时转换音频文件,以最大限度地提高跨浏览器兼容性。 今天我的代码没有任何修改,但。猜测昨天我正在测试浏览器缓存的旧版本页面。 无论如何,我有另一个问题。上传脚本适用于Firefox,Chrome和Internet Explorer,但不适用于Safari。当我拖放一个文件,页面上传到服务器只有15B,我无法弄清楚为什么。任何建议? –