Question

请帮助!!当我搜索这个时，我看到很多混合的结果，这些都不适用于此。我的目标基本上是将随机且动态填充的歌曲列表转换为播放列表，以便每首歌曲一个接一个播放，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，第二首歌曲为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嵌入小部件中，如下所示：< / p>

$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 /键开始，从数组中检索该键的媒体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");
                }

        }
    }
}
}

Answer 1

好的，所以我通过使用递归函数调用解决了这个问题。点击后我调用play函数，它读取媒体id，检查api类型，递增密钥并调用ajax获取iframe。然后，ajax的成功函数将iframe返回到相应的div，等待歌曲的长度，然后再次使用递增的键作为参数调用初始播放功能。还有一些小问题需要解决，比如在用户在媒体中搜索时增加或减少时间，但在大多数情况下，这是一个很棒的播放列表解决方案！

连续的Ajax调用Javascript For循环 - 播放列表

1 个答案: