3

几个星期以来，我一直在努力寻找解决方案。

我将此用作指南 - https://github.com/aitorciki/jquery-playlist 但我无法让它发挥作用。该脚本没有附带工作示例。我不是菜鸟，但这对我来说有点太复杂了。

Firebug 确认所有脚本正在加载。当 Ajax 调用运行时，Web 播放器会闪烁一秒钟 - 然后是白屏。

我的页面包括：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery.playlist.js"></script>


<body>
<script type="text/javascript">
    $(document).ready(function() {
           proxy: 'proxy.php',
           $('audio').playlistParser();
    });
</script>

<audio controls>
  <source src="http://listen.radionomy.com/hits4u.m3u" type="audio/m3u">
  Your browser does not support the audio element.
</audio> 
</body>

然后是我的ajax调用代理文件（proxy.php）：

 $url = file_get_contents($_GET["url"]);
 echo $url;

最后是 jquery.playlist.js：

(function($) {

$.parserM3U = function(list) {
    this.parse = function() {
        //TODO: in some cases an empty string is matched, why?
        m = list.match(/^(?!#)(?!\s).*$/mg);
        urls = $.grep(m, function(n, i) {
            return (n != '');
        });
        return urls;
    }
};

$.playlistOptions = {
    proxy: null,
    parsers: {
        m3u: $.parserM3U
    },
    navArrows: false,
    navArrowsPath: ''
};

var fileExtension = function(url) {
    m = url.match(/\w*?(?=#)|\w*?(?=\?)|\w*$/);
    return m[0];
}

var createNavArrows = function(player) {
    var ids = ['left', 'right'];
    var arrows = new Array();
    for (i in ids) {
        var arrow = new Image();
        var pos = ids[i];
        var src = $.playlistOptions.navArrowsPath + pos + '.png';
        var id = 'playlist_arrow_' + pos;
        $(arrow).attr('src', src);
        $(arrow).attr('id', id);
        $(arrow).hide();
        $('body').append($(arrow));
        arrows.push($(arrow));
    }
    return arrows;
}

var positionNavArrow = function(arrow, pos, player) {
    //In Webkit browsers the positioning fails if no height and
    //width have been set for the player.
    var atop = (player.height() / 2) + (player.position().top) - (arrow.height() / 2);
    if (pos == 'left') {
        var aleft = player.position().left + 10;
    } else {
        var aleft = player.position().left + player.width() - arrow.width() - 10;
    }
    arrow.css('position', 'absolute');
    arrow.css('top', atop);
    arrow.css('left', aleft);
}

var disableNavArrow = function(arrow) {
    arrow.hide()
    arrow.css('visibility', 'hidden');
}

var enableNavArrow = function(arrow) {
    arrow.css('visibility', 'visible');
}

$.fn.playlistParser = function(settings) {

    $.extend($.playlistOptions, settings);

    var plExtensions = new Array();
    for (ext in $.playlistOptions.parsers) {
        plExtensions.push(ext);
    }

    return this.each(function() {
        var player = this;
        var src = player.currentSrc;
        var extension = fileExtension(src);
        var playlist = new Array();
        var current = -1;
        var leftArrow = null;
        var rightArrow = null;

        if ($.inArray(extension, plExtensions) < 0) return;

        var playFollowing = function(reverse) {
            if (reverse) {
                current--;
            } else {
                current++;
            }
            if ($.playlistOptions.navArrows) {
                if (current == 0) {
                    disableNavArrow($(leftArrow));
                } else {
                    enableNavArrow($(leftArrow));
                }
                if (current == playlist.length - 1) {
                    disableNavArrow($(rightArrow));
                } else {
                    enableNavArrow($(rightArrow));
                }
            }
            var nextUrl = playlist[current];
            player.src = nextUrl;
            player.load();
        }

        if ($.playlistOptions.navArrows) {
            var arrows = createNavArrows($(player));
            leftArrow = arrows[0];
            rightArrow = arrows[1];
            $(leftArrow).bind('click', function(e) {
                playFollowing(true);
            });
            $(rightArrow).bind('click', function(e) {
                playFollowing();
            });
            // Seems that Webkit browsers defer the images size parsing.
            // Since positioning them needs the size, we wait until this
            // information is available.
            $(window).load(function() {
                positionNavArrow(leftArrow, 'left', $(player));
                positionNavArrow(rightArrow, 'right', $(player));
            });
            $(leftArrow).bind('mouseover', function(e) {
                $(this).show();
            });
            $(rightArrow).bind('mouseover', function(e) {
                $(this).show();
            });
            $(player).bind('mouseover', function(e) {
                leftArrow.show();
                rightArrow.show();
            });
            $(player).bind('mouseout', function(e) {
                leftArrow.hide();
                rightArrow.hide();
            });
        }

        if ($.playlistOptions.proxy) {
            ajax_url = $.playlistOptions.proxy;
            ajax_options = {url: src};
        } else {
            ajax_url = src;
            ajax_options = null;
        }

        $.get(ajax_url, ajax_options, function(data) {
            var parser = new $.playlistOptions.parsers[extension](data);
            playlist = parser.parse();
            // Playlist emulation, each time a file has ended playing
            // let's play the next one in the list.
            if (playlist.length > 0) {
                $(player).bind('ended', function(e) {
                    playFollowing();
                });
            }
            playFollowing();
        });

    });
};

})(jQuery);
4

1 回答 1

0

该对象从 player.currentSrc 读取其源。为此使用

<audio controls src="http://listen.radionomy.com/hits4u.m3u" />

代理也没有正确初始化。它应该读

$('audio').playlistParser({
 proxy: 'proxy.php'
});
于 2015-01-01T02:10:10.703 回答