プレイリストから "Now Playing"バナーに曲名を取得する必要があります。

phpとjavascriptを使用してオンラインミュージックプレイヤーを作成していますが、問題を処理する最善の方法を見つけられません。プレイリストから "Now Playing"バナーに曲名を取得する必要があります。

私はページに表示されるMySQLデータベースから生成されたXMLファイルからプレイリストを作成しましたが、私はプレイリストを作成することができませんでした。プレイリストから曲をクリックすると、 "Now Playing"バナーに曲の名前が表示されます。

私は何らかの "onClick"機能が必要だと思いますが、私は何をする必要があるのか正確には分かりません。また、私は明らかに新しい曲を再生するためにページを更新する必要はありません。

ありがとうございました！

私のプレーヤーの基本コードは以下の通りです。実際のプレイヤーはカスタムインターフェイスとXMLプレイリストを使用しますが、これは基本的にそれです。「Now Playing」機能の作成方法を理解するだけです。ありがとう！

<html> 
<head> 
<script type="text/javascript"> 

    function loadPlayer() { 
     var audioPlayer = new Audio(); 
     audioPlayer.controls="controls"; 
     audioPlayer.addEventListener('ended',nextSong,false); 
     audioPlayer.addEventListener('error',errorFallback,true); 
     document.getElementById("player").appendChild(audioPlayer); 
     nextSong(); 
    } 
    function nextSong() { 
     if(urls[next]!=undefined) { 
      var audioPlayer = document.getElementsByTagName('audio')[0]; 
      if(audioPlayer!=undefined) { 
       audioPlayer.src=urls[next]; 
       audioPlayer.load(); 
       audioPlayer.play(); 
       next++; 
      } else { 
       loadPlayer(); 
      } 
     } else { 
      alert('the end!'); 
     } 
    } 
    function errorFallback() { 
      nextSong(); 
    } 
    function playPause() { 
     var audioPlayer = document.getElementsByTagName('audio')[0]; 
     if(audioPlayer!=undefined) { 
      if (audioPlayer.paused) { 
       audioPlayer.play(); 
      } else { 
       audioPlayer.pause(); 
      } 
     } else { 
      loadPlayer(); 
     } 
    } 
    function pickSong(num) { 
     next = num; 
     nextSong(); 
    } 

    var urls = new Array(); 
     urls[0] = '/testphp/upload/Sleep Away.mp3'; 
     urls[1] = '/testphp/upload/Kalimba.mp3'; 
     urls[2] = '/testphp/upload/Sleep Away.mp3'; 
     urls[3] = '/testphp/upload/Kalimba.mp3'; 
    var next = 0; 


</script> 

</head> 
<body> 

<div id="player"></div> 
<a href="#" onclick="playPause()">Play/Pause!</a> | 
<a href="#" onclick="nextSong()">Next!</a><br><br> 

<a href="#" onclick="pickSong(0)">Sample 1</a><br> 
<a href="#" onclick="pickSong(1)">Sample 2</a><br> 
<a href="#" onclick="pickSong(2)">Missing File</a><br> 
<a href="#" onclick="pickSong(3)">Sample 3</a> 

</body> 
</html>

出典

2012-05-09 Johan

あなたは、少なくとも私たちに見ていくつかのコードを与える必要がありますが、インスタンスのために持っている場合は、あなたの質問について、。これをどうやってやったのか推測する方法はありません。 – OptimusCrime

クリックした曲の名前はページの右側にあると思いますか？もしそうなら、jqueryを使ってその名前をつかんでバナーに書くことができますが、最初のコメントのように、何らかのコードやサンプルコードを見ることなくあなたを助けるのは難しいです。

更新：jqueryがあると仮定します。

[OK]を、あなただけのアンカータグにクラス=「歌」のようなものをクラスを追加し、今ピック曲のHTML用

<div id="nowPlaying"></div>

を再生するためのdivを作成する必要があるので、その後にjqueryの関数を作成私がテストしていないが、それは動作するはずクリック

$('a.songs').click(function(){ 
    $('#nowPlaying').html($(this).html()); 
});

をキャッチし、この機能を使用すると、nowPlayingでそれにして出力クリックアンカーのHTMLをピックアップします。 next（）関数では、ソング名を配列の正しい位置に出力するだけです（配列の名前がhtmlに一致するように、文字列を解析して名前を出力する必要があります）。 nextsong機能あなたはそれが全体ではなく、パスの曲の名前を与えますので、あなたの文字列を解析するためにparseThisを定義する必要が

$('#nowPlaying').html(parseThis(urls[index]));

内でこのような何か。または、曲名だけを持つ別の配列を作成して、それをつかむこともできます。次の曲がない場合や、元の曲に戻ることができる場合にはデフォルトのケースがあることを確認してください。それはあなた次第です。それは少なくとも論理ですが、それはかなりシンプルであり、ロジックはおそらく改善されるかもしれませんが、それはあなたを始めなければなりません。

出典

2012-05-09 16:59:33 Huangism

すぐにお返事ありがとうございます。これは、私がやるべきことを理解しようとしているようなものです。上記のコードを投稿しました。再度、感謝します。 – Johan

これは素晴らしい仕事でした。私はまだ次の機能を動作させるのに問題がありますが、私は試し続けます。 – Johan

あなたが立ち往生し、あなたが持っているものを投稿することを忘れないでください別の質問を投稿してください – Huangism

あなたは音楽ファイルを再生するためにどのプレーヤーを使用していますか？私の場合、オンラインでyahoo webplayerを使用しました。統合して使用するのはとても簡単です。それはあなたが必要とするすべての機能を備えています。 JavaScriptの使用中

<div id="now_playing"></div>

：

<a href="your song address" id="song">The song</a>

と：

$("#song").click(function(){ 
    $("#now_playing").html() = $(this).html(); 
});

出典

2012-05-09 17:06:40 Acute

プレイリストから "Now Playing"バナーに曲名を取得する必要があります。

答えて

関連する問題