Upload and play a song

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>

Answers:

Answer

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!

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.