需要从播放列表中将歌曲名称获取到“正在播放"列表中.带php& javascript的横幅 [英] Need to get song name from playlist into the "Now Playing" banner w/php&javascript
问题描述
我正在使用php和javascript创建一个在线音乐播放器，但我想不出解决问题的最佳方法.我创建了一个MySQL数据库，其中包含歌曲的名称，艺术家，专辑等.
I'm creating an online music player using php and javascript and I can't figure out the best way to handle an issue. I have created a MySQL database that holds the song's Name, Artist, Album, etc.
我从显示在页面上的MySQL数据库生成的XML文件中创建了一个播放列表，当我单击时，我唯一无法获得的功能就是将歌曲名称显示在正在播放"横幅中在播放列表中的歌曲上.
I created a playlist from an XML file that is generated from the MySQL db which appears on the page and the only functionality I can't get is making the name of the song appear in the "Now Playing" banner when I click on a song from the playlist.
我认为我需要某种"onClick"功能，但是我无法弄清楚我需要做什么.另外，我显然不想只是为了播放一首新歌而刷新页面.
I think I need some kind of "onClick" function but I can't figure out exactly what I need to do. Also, I obviously don't want to have to refresh the page just to play a new song.
感谢您的帮助！
播放器的基本代码如下.实际的播放器使用一个自定义界面和一个XML播放列表，但这基本上就是它.我只需要弄清楚如何创建正在播放"功能.谢谢！
The basic code for my player is below. The actual player uses a custom interface and an XML playlist but this is basically it. I just need to figure out how to create the "Now Playing" function. Thanks!
<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>
推荐答案
我假设您单击的歌曲名称在页面右侧?如果是这样，您可以使用jquery来获取该名称并将其写到横幅中，但是就像第一个评论所说的那样，如果没有看到某种代码或示例代码，就很难为您提供帮助.
I assume the name of the song you clicked on is on the page right? If so you can use jquery to grab that name and write it to the banner but like the first comment said, it is hard to help you without seeing some kind of code or example code.
更新:假设您有jquery.
Update: Assuming you have jquery.
好，所以您只需要创建一个div即可播放
Ok, so you just need to create a div for now playing
<div id="nowPlaying"></div>
对于选择歌曲html，将一个类添加到锚标记中，例如class ="songs"，然后创建一个jquery函数以捕获点击
For the pick song html, add a class to the anchor tags something like class="songs" then create a jquery function to catch the clicking
$('a.songs').click(function(){
$('#nowPlaying').html($(this).html());
});
我尚未测试过，但应该可以使用，此功能将为您单击的锚获取html并在nowPlaying中将其输出.对于next()函数，您只需要在数组的正确位置输出歌曲名称(您必须解析字符串以输出名称，但数组中的名称应该与html匹配).在nextsong函数中类似这样的东西
I have not tested but it should work, this function will pick up the html for the anchor you clicked on and output it in nowPlaying. For the next() function you just need to output the song name in the correct position of the array (you have to parse the string so it outputs the name, btw the names in the array should match the html). Something like this inside the nextsong function
$('#nowPlaying').html(parseThis(urls[index]));
您必须定义parseThis来解析您的字符串，以便它给出歌曲名称而不是整个路径.或者，您可以创建一个仅包含歌曲名称的其他数组，以便可以轻松获取它.确保您有默认情况下是否没有下一首歌曲，或者您可以循环回到第一首歌曲，这取决于您.至少这是逻辑，这很简单，并且逻辑也可能会得到改进，但这应该可以帮助您入门
you have to define parseThis to parse your string so it gives the song name instead of the entire path. Or you can create a different array that only has the song name so you can just grab it. Make sure you have a default case for if there is no next song or you can circle back to the fist song, that's up to you. That's the logic at least, it's fairly simple and the logic can probably be improved as well but that should get you started
这篇关于需要从播放列表中将歌曲名称获取到“正在播放"列表中.带php& javascript的横幅的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
