几周来我一直在努力寻找解决方案。
我以此为指导 - https://github.com/aitorciki/jquery-playlist 但我就是无法让它发挥作用。该脚本没有附带工作示例。我不是菜鸟，但这对我来说有点太复杂了。
Firebug 确认所有脚本都在加载。当 Ajax 调用运行时，网络播放器会闪烁一瞬间 - 然后是白屏。
我的页面包括:
<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);
最佳答案
该对象从 player.currentSrc 读取其源。因此使用
<audio controls src="http://listen.radionomy.com/hits4u.m3u" />
代理也没有正确初始化。应该是
$('audio').playlistParser({
proxy: 'proxy.php'
});
关于javascript - 使用 jQuery 在浏览器中播放 .m3u 播放列表的方法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21640104/