助けてください！！これを検索すると、さまざまな結果が表示されますが、ここに当てはまるものはありません。私の目標は基本的に、ランダムかつ動的に入力された曲のリストをプレイリストに変換して、各曲が次々に再生され、youtube または soundcloud の iframe が順番に ajax されるようにすることです。
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、2 番目の曲は 1 というようになります。各曲のメディア ID も、読み込み時に一度に 1 つずつ 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 が保持されている配列キー、およびリスト内の曲数のパラメーターを受け取ります。メディア ID の配列を反復処理するための for ループがあります。
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/キーから開始し、配列からそのキーのメディア 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");
}
}
}
}
}