I am trying to download and play a song using HTML5. I use JavaScript to upload a file to the server and jPlayer to play the song, but I have problems with this plugin.
This is my code:
$(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"); } }); }); });
The file is uploaded to the server, but jPlayer does not play it, and I cannot understand why ...
@vigrond: Yes, I can !;)
<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>
source share