Загрузить и воспроизвести песню - PullRequest
Новая
       1

Загрузить и воспроизвести песню

4 голосов
/ 02 декабря 2011

Я пытаюсь загрузить и воспроизвести песню с 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 не воспроизводит его, и я не могу понять, почему ...

@ Вигронд: Да, я могу! ;) 

<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>

1 Ответ

0 голосов
/ 02 декабря 2011

Основная проблема, которую нужно понять, заключается в том, что все браузеры работают по-разному, когда речь заходит о поддержке аудио в HTML5. (см. здесь: http://www.w3schools.com/html5/html5_audio.asp)

Именно поэтому в jPlayer есть решение для резервного копирования на флэш-память.

По умолчанию jPlayer сначала пробует решение html5 и возвращается к флэш-памяти со значением по умолчанию: 

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

Для того, чтобы поддержка флэш-памяти работала, вы должны установить swfPath в каталог, содержащий файл Jplayer.swf, который поставляется с jPlayer. 

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/

Дайте мне знать, если это поможет!

...