0

phpとjavascriptを使用してオンライン音楽プレーヤーを作成していますが、問題を処理するための最良の方法がわかりません。曲の名前、アーティスト、アルバムなどを保持するMySQLデータベースを作成しました。

ページに表示されるMySQLデータベースから生成されたXMLファイルからプレイリストを作成しましたが、取得できない機能は、曲をクリックしたときに「再生中」バナーに曲の名前を表示することだけです。プレイリストから。

ある種の「onClick」機能が必要だと思いますが、何をする必要があるのか​​正確にはわかりません。また、新しい曲を再生するためだけにページを更新する必要はありません。

ご協力いただきありがとうございます！

私のプレーヤーの基本的なコードは以下のとおりです。実際のプレーヤーはカスタムインターフェイスとXMLプレイリストを使用しますが、これは基本的にそれです。「NowPlaying」関数の作成方法を理解する必要があります。ありがとう！

<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>
4

2 に答える 2

0

クリックした曲の名前はページにあると思いますよね？もしそうなら、jqueryを使用してその名前を取得し、バナーに書き込むことができますが、最初のコメントが言ったように、ある種のコードまたはサンプルコードを見ずにあなたを助けるのは難しいです。

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

さて、今プレイするためのdivを作成する必要があります

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

曲を選ぶhtmlの場合、class = "songs"のようなクラスをアンカータグに追加してから、クリックをキャッチするjquery関数を作成します

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

私はテストしていませんが、動作するはずです。この関数は、クリックしたアンカーのhtmlを取得し、nowPlayingに出力します。next（）関数の場合、配列の正しい位置に曲名を出力する必要があります（文字列を解析して名前を出力する必要がありますが、配列内の名前はhtmlと一致する必要があります）。nextsong関数内のこのようなもの

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

文字列を解析するためにparseThisを定義して、パス全体ではなく曲名を指定する必要があります。または、曲名のみを持つ別の配列を作成して、それを取得することもできます。次の曲がない場合、または最初の曲に戻ることができる場合は、デフォルトのケースがあることを確認してください。それはあなた次第です。それは少なくともロジックです、それはかなり単純で、ロジックもおそらく改善することができますが、それはあなたが始めるはずです

于 2012-05-09T16:59:33.643 に答える
0

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

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

と：

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

JavaScriptでの使用：

$("#song").click(function(){
    $("#now_playing").html() = $(this).html();
});
于 2012-05-09T17:06:40.827 に答える