请帮忙！！当我搜索这个时，我看到了很多混合的结果，没有一个适用于此。我的目标基本上是将随机且动态填充的歌曲列表转换为播放列表，以便每首歌曲一个接一个地播放，并且 youtube 或 soundcloud 的 iframe 按顺序排列。
我有一个从 youtube 和 soundcloud api 填充的简单歌曲列表，它输出到无序列表。当列表中的每首歌曲被加载到浏览器中时，它的锚标签会被赋予一个 id。
//List Item
echo "<a id=\"" . $i . "\" href=\"javascript:void(0)\" onclick=\"play_clicked('youtube',".$i.",".$song_count.")\">
<li class = \"song\">";
列表中的第一首歌曲的 id 为 0，第二首歌曲的 id 为 1，依此类推。每首歌曲的媒体 ID 在加载时也会一次“推送”到一个 JavaScript 数组，因此歌曲的锚标记的 ID 对应于保存歌曲媒体 ID 的数组中的键。
echo
'<script type="text/javascript">
track_id_array.push("'.$vid_id.'");
</script>';
我创建了一个在单击歌曲时调用的 javascript 函数：
function play_clicked(api_type,clicked_key,song_count)
该函数接收 api 类型的参数 - soundcloud 或 youtube、锚点 id 或单击的媒体 id 所在的数组键，然后是列表中有多少首歌曲。有一个 for 循环遍历媒体 ID 数组：
for (var i=clicked_key; i<=song_count; i++){
所以我从点击歌曲的 id 开始循环，目标是继续遍历点击歌曲之后的歌曲。首先，我检查媒体 ID 是否存在于数组中：
if(window.track_id_array[i])
如果存在，它应该保存媒体的 id - 例如 youtube id - 6_8ZZtL6qmM。然后我检查它是 soundcloud 还是 youtube 歌曲，根据哪个，我将带有 ajax 的媒体 id 发送到一个 php 脚本，该脚本会将 id 嵌入到 soundcloud 或 youtube 的 html5 iframe 嵌入小部件中，如下所示：
$vid_id = $_GET[id];
//Youtube player embed
echo '<iframe width="498" height="280" src="http://www.youtube.com/embed/'.$vid_id. '?autoplay=1" frameborder="0" allowfullscreen></iframe>
';
然后我将此 html 返回到我的主页中的 div，歌曲将在相应的小部件中播放。我想象的实现播放列表目标的方式是从循环中单击的歌曲的 id/key 开始，从数组中检索该键的媒体 id，检查 api 类型，进行正确的 ajax 调用，设置超时对于歌曲的长度，然后在歌曲播放完毕后让循环继续到数组中的下一个键，这样它就会从列表中的下一首歌曲或数组中的 id 开始该过程。
Javascript 真的不是我的强项，我讨厌为此必须使用客户端代码。我的问题是，我在这里描述的方法是否可行，或者我是不是走错了路？我只想在循环中一个接一个地进行 ajax 调用，因此它们不会同时发生。这是我的全部功能，我得到了一些奇怪的结果。它播放列表中的最后一首歌曲并跳过所有其他歌曲。任何解释也许是为什么？再次，我真的不擅长使用 javascript，非常感谢您的帮助！
//play clicked track and those following
function play_clicked(api_type,clicked_key,song_count){
function showPlayTrack() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var outLink = xhr.responseText;
}
else {
var outLink = "There was a problem with the request" + xhr.status;
}
}
var vis = parent.document.getElementById("play_content");
vis.innerHTML = outLink;
setTimeout(300000);
}
for (var i=clicked_key;i<=song_count;i++){
if(window.track_id_array[i]){
if(api_type == "scloud"){
var soundcloud_id = window.track_id_array[i];
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}
else {
if (window.ActiveXObject) {
try {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {
}
}
}
if (xhr) {
xhr.onreadystatechange = showPlayTrack;
xhr.open("GET", "getsoundcloud.php?streamurl="+soundcloud_id, true);
}
else {
alert("Sorry, but I could't create an XMLHttpRequest");
}
}else if (api_type == "youtube"){
var vid_id = window.track_id_array[i];
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}
else {
if (window.ActiveXObject) {
try {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {
}
}
}
if (xhr) {
xhr.onreadystatechange = showPlayTrack;
xhr.open("GET", "getyoutube.php?streamurl="+vid_id, true);
xhr.send(null);
}
else {
alert("Sorry, but I could't create an XMLHttpRequest");
}
}
}
}
}