需要从播放列表中将歌曲名称导入“正在播放”横幅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

回答

相关问题