Question

这是我的大脑。 Chrome的console.log中没有任何错误，播放列表正在填充jPlayer，很好，但歌曲不会播放，音量控制不显示，时间（开始和结束）不在＆＃ 39; t出现。

这是我的代码，它运行花花公子，我使用最新的JQuery库和最新版本的jPlayer。

//Define the playlist
var playlist = [];

//Set the prequisites
var cssSelector = {
    jPlayer: "#jquery_jplayer_1",
    cssSelectorAncestor: "#jp_container_1"
};
//Options
var options = {
    swfPath: "libs/jwPlayer/Jplayer.swf",
    supplied: "mp3",
    solution: 'html, flash',
    preload: 'metadata',
    volume: 0.8,
    muted: false,
    wmode: "window",
    playlistOptions:
            {
                autoPlay: false
            }
};

//jPlayer
var myPlaylist = new jPlayerPlaylist(cssSelector, playlist, options);

//Get the JSON file to dynamically load the playlist
$.getJSON("mp3/playlist.json",
        function(data) {  // get the JSON array
            $.each(data['data'].tracks,
                    function(index, value) {
                        myPlaylist.add({
                            title: value.title,
                            composer: value.composer,
                            performedby: value.performedby,
                            mp3: value.mp3

                        });
                    });
        });

非常感谢任何帮助。

HERE＆＃39;我在浏览器中查看的jPlayer：

enter image description here

更新：贾斯汀，下面，询问了playlist.json文件的相对路径。这是来自Netbeans 8.0的屏幕截图，显示该文件所在的位置：

贾斯汀，希望这会有所帮助：

This is the location of the playlist.json file.

此外，这里是JSON文件本身：

{
        "data": {
            "tracks": [
                {
                    "performedby": "Some group - 2005",
                    "url": "http://www.somedomain.com",
                    "solovocal": "Phil",
                    "soloinstrumental": "",
                    "lyricsby": "Peter",
                    "musicby": "Phil",
                    "composer": "Phil",
                    "arrangedby": "Phil",
                    "copyrightby": "Peter and Phil",
                    "copyrightdate": "2005",
                    "recordeddate": "2005 at a music studio",
                    "title": "Sheperd of the Fold",
                    "mp3": "02ShepherdoftheFold.mp3",
                    "notes": "Original lyrics written by Peter. Music by Phil"
                }, {
                    "performedby": "US Navy Band Guam - 1982 - 1984",
                    "url": "",
                    "solovocal": "",
                    "soloinstrumental": "Peter - Flugelhorn",
                    "lyricsby": "",
                    "musicby": "Chuck Mangione",
                    "composer": "Chuck Mangione",
                    "arrangedby": "Peter for the US Navy Band",
                    "copyrightby": "Chuck Mangione",
                    "copyrightdate": "1968",
                    "recordeddate": "1977 Eastman School of Music, Rochester, NY",
                    "title": "The XIth Commandment",
                    "mp3": "11thCommandment830508.mp3",
                    "notes": "Chuck Mangione composed The XIth Commandment for Stephen Gadd, who gave the world premiere performance during his percussion graduate recital on February 16, 1968 at the Eastman School of Music."
                }

            ]
        }
    }

谢谢大家......

更新：

我使用promises很好地加载了播放列表。此外，第一首歌也很完美。然而，即便如此，NEXT和PREV按钮也不起作用，也不会点击下一首歌推进播放器。这是我的JS代码：

    //Define the playlist
    var playlist = [];

    //Options
    var options = {
        swfPath: "libs/jwPlayer/Jplayer.swf",
        supplied: "mp3",
        solution: 'html, flash',
        preload: 'metadata',
        volume: 0.8,
        muted: false,
        wmode: "window",
        errorAlerts: true,
        warningAlerts: true,
        playlistOptions: {
            autoPlay: false,
            loopOnPrevious: false,
            shuffleOnLoop: true,
            enableRemoveControls: false,
            displayTime: 'slow',
            addTime: 'fast',
            removeTime: 'fast',
            shuffleTime: 'slow'
        }
    };

    //Set the prequisites
    var cssSelector = {
        cssSelectorAncestor: "#jp_container_1",
        currentTime: '.jp-current-time',
        duration: '.jp-duration',
        fullScreen: '.jp-full-screen',
        gui: '.jp-gui',
        jPlayer: "#jquery_jplayer_1",
        mute: '.jp-mute',
        next: '.jp-next',
        noSolution: '.jp-no-solution',
        pause: '.jp-pause',
        play: '.jp-play',
        playbackRateBar: '.jp-playback-rate-bar',
        playbackRateBarValue: '.jp-playback-rate-bar-value',
        playBar: '.jp-play-bar',
        previous: '.jp-previous',
        repeat: '.jp-repeat',
        repeatOff: '.jp-repeat-off',
        restoreScreen: '.jp-restore-screen',
        seekBar: '.jp-seek-bar',
        shuffle: '.jp-shuffle',
        shuffleOff: '.jp-shuffle-off',
        stop: '.jp-stop',
        title: '.jp-title',
        unmute: '.jp-unmute',
        videoPlay: '.jp-video-play',
        volumeBar: '.jp-volume-bar',
        volumeBarValue: '.jp-volume-bar-value',
        volumeMax: '.jp-volume-max'
    };
    //Define the main Playlist
    var myPlaylist;
    //Set the JPLAYER OBJECT
    var jpObj;

    //Window onLoad function
    $(window).load(function() {

        //STEP 1
        //BEGIN LOADING PAGE IMPORTS
        //Load the navigation console
        $("#nav-container").load("imports/nav.html");
        //Load the main content for this page
        $("#main-container").load("imports/home.html");
        //Load the nav content for this page
        $("#topbar").load("imports/topBar.html");
        //Load the header content
        $("header").css({'background-image'
                    : 'url(images/'
                    + images[Math.floor(Math.random() * images.length)]
                    + ')'
        });
        //Load the Footer
        $("footer").load("imports/footer.html");
        //Load the Copyright stuff
        $("#copyright").load("imports/copyright.html");
        //END LOADING PAGE IMPORTS!

        //jPlayerPlaylist initialization
        myPlaylist = new jPlayerPlaylist(cssSelector, playlist, options);

        var mediaPlayer = jQuery('#jquery_jplayer_1');

        //Get the JSON file to dynamically load the playlist
        $.getJSON("playlist.json", //This is located in the ROOT folder
                function(data) {  // get the JSON array
                    $.each(data['data'].tracks,
                            function(index, value) {
                                myPlaylist.add({
                                    tracknbr: index,
                                    title: value.title,
                                    composer: value.composer,
                                    performedby: value.performedby,
                                    mp3: value.mp3
                                });
                                //copy the original Playlist into the playlist array
                                playlist[index] = myPlaylist.original[index];
                                // Attach a done, fail, and progress handler for the asyncEvent
                                if (playlist.length > 0) {
                                    $.when(asyncEvent())
                                            .then(
                                                    function(status) {
                                                        //Progressing nicely
                                                        console.log(status + ", things are going well!");
                                                        jpObj.jplyr(status + " - Progressing Nicely");
                                                    },
                                                    function(status) {
                                                        //ERROR Catching
                                                        console.log(status + ", you fail this time!");
                                                        throw new Error("There was an error loading the playlist.");
                                                    },
                                                    function(status) {
                                                        //Working...wait for it...
                                                        if (status === "") {
                                                            //Not ready
                                                            return;
                                                        }
                                                    }
                                            );
                                }
                            });
                });


        //Set the jpObj for Promises to load the playlist
        jpObj = {
            jplyr: function(stat) {
                try {
                    if (stat === "Success! - Progressing Nicely") {
                        console.log("My Status:: " + stat);
                        //jPlayer initialization
                        mediaPlayer.jPlayer({
                            options: options,
                            cssSelector: cssSelector,
                            ready: function() {

                                for (var i = 0; i < playlist.length; i++) {
                                    $(this).jPlayer("setMedia", {
                                        title: playlist[i].title,
                                        mp3: playlist[i].mp3
                                    }).jPlayer("play");
                                }

                            }//END OF READY FUNCTION
                        });
                        // The next/previous commands
                        $(this).click(function() {
                            //$("#jquery_jplayer_1").trigger($.jPlayer.event.ended);
                            $(".jp-next").jPlayer("next");
                        });
                        $(this).click(function() {
                            //$("#jquery_jplayer_1").trigger($.jPlayer.event.play);
                            $(".jp-previous").jPlayer("play");
                        });
                        //Initialize the inspector
                        $("#jplayer_inspector_1")
                                .jPlayerInspector({
                                    jPlayer: $("#jquery_jplayer_1")
                                });
                    } else {

                        return false;
                    }
                }
                catch (e) {

                    var errMsg = "There was an error processing the Jplyr Object:" + e;
                    console.log(errMsg);
                    throw new error(errMsg);
                    return false;
                }

            }

        };
        //Promise function...
        function asyncEvent() {
            //Set the JQ.Defered
            var myJplyr = $.Deferred();

            // Set object as a promise
            myJplyr.promise(jpObj);

            // Resolve the deferred
            myJplyr.resolve("Success!");

            // Reject the deferred
            myJplyr.reject("Failure!");

            // Use the object as a Promise
            jpObj.done(function() {
                jpObj.jplyr("We\'re Good..."); // Fire the function on the comeback
            });
            // Return the Promise so caller can't change the Deferred
            return myJplyr.promise();
        }
    });

jPlayer不播放mp3加上音量控制和开始/结束时间不显示

0 个答案: