Upload and play a song

Question

i'm trying to upload and play a song with HTML5. I'm using JavaScript to upload the file to the server and jPlayer to play the song but i'm having issues whit this plug-in.

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 doesn't play it and i can't figure out 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>

Can you supply your HTML as well? There are a few steps necessary to get jPlayer to run correctly, and the correct HTML elements is one of them. You may also want to try setting errorAlerts: true and warningAlerts:true. This will often give you specific information about what is going on through alert dialogs. — Vigrond, Dec 01 '11 at 22:33

score 0 · Answer 1 · answered Dec 01 '11 at 23:47

The main issue to understand is that all browsers act differently when it comes to HTML5 audio support. (see here: http://www.w3schools.com/html5/html5_audio.asp)

That is why jPlayer has the flash backup solution.

By default, jPlayer tries the html5 solution first, and falls back to flash with this default setting:

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

In order for the flash support to function, you must set swfPath to the containing directory of the Jplayer.swf file that jPlayer comes with.

swfPath: "/js"

Additionally, jPlayer recommends at least 2 different versions of the same file to maximize support for HTML5. For example, .ogg and .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"
            });

For an example, I set up a test page here of an invisible jPlayer player, with the code and directory structure: http://vigrond.com/blog/2011/12/01/invisible-html5-flash-audio-player-using-jplayer/

Let me know if this helps!

I knew that, the point is i don't want to use Flash in my website. I'm thinking about convert audio files on the fly in order to maximize cross-browser compatibility. Today my code is working without any modification though. Guess that yesterday i was testing an older version of the page cached by the browser. Anyway i have another issue. The uploading script works fine with Firefox, Chrome and Internet Explorer, but it doesn't work with Safari. When i drag and drop a file, the page upload to the server only 15B and i can't figure out why. Any suggestion? — Nikko Hel, Dec 03 '11 at 20:37

Upload and play a song

1 Answers1