Requesting Assistance! I am encountering numerous conflicting results in my search for a solution to this issue. The objective is to create a playlist from a dynamically generated list of songs, ensuring that each song plays consecutively and the iframe for YouTube or SoundCloud is loaded sequentially using AJAX.

The list of songs is fetched from the YouTube and SoundCloud APIs and displayed as an unordered list. Each song's anchor tag is assigned an ID as it loads into the browser.

//List Item
echo "<a id=\"" . $i . "\" href=\"javascript:void(0)\" onclick=\"play_clicked('youtube',".$i.",".$song_count.")\">
                            <li class = \"song\">";

The first song receives the ID 0, the second song gets 1, and so on. Additionally, the media ID of each song is added to a JavaScript array while they load, associating the song's ID with the key where its media ID is stored in the array.

echo 
'<script type="text/javascript">

track_id_array.push("'.$vid_id.'");

</script>';

A JavaScript function is created to handle when a song is clicked:

function play_clicked(api_type,clicked_key,song_count)

This function takes parameters for API type - SoundCloud or YouTube, the anchor ID or array key containing the clicked media ID, and the total number of songs in the list. It utilizes a for loop to iterate through the array of media IDs:

for (var i=clicked_key; i<=song_count; i++){

The loop starts from the ID of the clicked song and proceeds to process the subsequent songs. Firstly, it checks if the media ID exists in the array:

if(window.track_id_array[i])

If found, this should hold the media ID such as a YouTube ID like "6_8ZZtL6qmM". Subsequently, it determines whether it is a SoundCloud or YouTube song, executing an AJAX call to embed the ID into a HTML5 iframe widget specifically designed for these platforms.

$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>
';

The embedded content is then returned to a div within the main page, allowing the respective song to play in the designated widget. To implement the playlist functionality, the plan involves initiating the loop from the clicked song's ID/key, fetching the corresponding media ID from the array, making the appropriate API call via AJAX, setting a timeout according to the song's duration, and moving on to the next key in the array upon completion of the song.

My familiarity with JavaScript is limited, and employing client-side code for this task is not preferred. Is the approach described here feasible, or am I approaching it incorrectly? I aim to execute the AJAX calls sequentially in the loop, avoiding simultaneous requests. When implementing the entire function, some unexpected outcomes were observed. Instead of playing all songs sequentially, only the last song in the list was played. Any insights into why this may be happening would be greatly appreciated!

//Play selected track and subsequent tracks
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");
                }

        }
    }
}
}