需要從播放列表中將歌曲名稱導入「正在播放」橫幅w/php＆javascript

我使用php和javascript創建了一個在線音樂播放器，我無法弄清楚處理問題的最佳方式。我創建了一個包含歌曲名稱，藝術家，專輯等的MySQL數據庫。需要從播放列表中將歌曲名稱導入「正在播放」橫幅w/php＆javascript

我從一個XML文件創建了一個播放列表，這個XML文件是從頁面上出現的MySQL數據庫生成的，而且我唯一的功能當我點擊播放列表中的歌曲時，get就會使歌曲的名稱出現在「正在播放」標題中。

我想我需要某種「onClick」函數，但我無法弄清楚我需要做什麼。另外，我顯然不想刷新頁面來播放新歌。

感謝您的幫助！

我的播放器的基本代碼如下。實際播放器使用自定義界面和XML播放列表，但基本上這是它。我只需要弄清楚如何創建「正在播放」功能。謝謝！

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

好了，你只需要創建一個div現在打

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

對於挑歌HTML，添加一個類錨標記像類=「歌曲」，然後創建一個jQuery函數趕上點擊

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

我沒有測試過，但它應該工作，此功能將拿起你點擊的錨和輸出它nowPlaying的HTML。對於next（）函數，您只需要在數組的正確位置輸出歌曲名稱（您必須解析字符串以便輸出名稱，btw數組中的名稱應與html匹配）。事情是這樣的nextsong功能

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

你必須定義parseThis所以它給人的歌曲名稱，而不是整個路徑解析您的字符串中。或者你可以創建一個只有歌名的不同陣列，這樣你就可以抓住它。確保你有沒有下一首歌的默認情況，或者你可以回到第一首歌，這取決於你。至少這是邏輯，它相當簡單，邏輯也可以改進，但這應該讓你開始

來源

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

需要從播放列表中將歌曲名稱導入「正在播放」橫幅w/php＆javascript

回答

相關問題