Question

我正在尝试使用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>

Answer 1

要理解的主要问题是，所有浏览器在HTML5音频支持方面的行为都不同。（见这里：http://www.w3schools.com/html5/html5_audio.asp）

这就是为什么jPlayer有闪存备份解决方案。

默认情况下，jPlayer首先尝试html5解决方案，然后使用此默认设置回退到flash：

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

为了使flash支持起作用，必须将swfPath设置为jPlayer附带的Jplayer.swf文件的包含目录。

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/

请告诉我这是否有帮助！

上传并播放歌曲

1 个答案: