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

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

javascript html jplayer
person Nikko Hel    schedule 01.12.2011    source источник
comment
Можете ли вы также предоставить свой HTML? Есть несколько шагов, необходимых для правильной работы jPlayer, и правильные элементы HTML — один из них. Вы также можете попробовать установить errorAlerts: true и warningAlerts: true. Это часто дает вам конкретную информацию о том, что происходит через диалоговые окна предупреждений.   -  person Vigrond    schedule 02.12.2011

Ответы (1)


arrow_upward
0
arrow_downward

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

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

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

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

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

swfPath: "/js"

Кроме того, jPlayer рекомендует как минимум две разные версии одного и того же файла для максимальной поддержки 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/

Позвольте мне знать, если это помогает!

person Vigrond    schedule 01.12.2011
comment
Я знал это, дело в том, что я не хочу использовать Flash на своем сайте. Я подумываю конвертировать аудиофайлы на лету, чтобы максимизировать кроссбраузерность. Сегодня мой код работает без каких-либо изменений. Угадайте, что вчера я тестировал старую версию страницы, кэшированной браузером. Во всяком случае, у меня есть другая проблема. Сценарий загрузки отлично работает с Firefox, Chrome и Internet Explorer, но не работает с Safari. Когда я перетаскиваю файл, страница загружается на сервер только 15 байт, и я не могу понять, почему. Любое предложение? - person Nikko Hel; 04.12.2011