Question

我正在使用php和javascript创建一个在线音乐播放器，我无法找出解决问题的最佳方法。我创建了一个MySQL数据库，用于保存歌曲的名称，艺术家，专辑等。

我从一个XML文件中创建了一个播放列表，该文件是从页面上显示的MySQL数据库生成的，我唯一看不到的功能就是当我点击时，该歌曲的名称出现在“正在播放”横幅中来自播放列表的歌曲。

我想我需要某种“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>

Answer 1

我假设您点击的歌曲名称在页面右侧？如果是这样，您可以使用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来解析你的字符串，以便它给出歌曲名称而不是整个路径。或者你可以创建一个只有歌曲名称的不同数组，这样你就可以抓住它。如果没有下一首歌，请确保您有默认情况，或者您可以回到第一首歌曲，这取决于您。至少这是逻辑，它相当简单，逻辑也可以改进，但这应该让你开始

Answer 2

您使用什么播放器播放音乐文件？在我的情况下，我使用在线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();
});

需要将播放列表中的歌曲名称添加到带有php＆amp; javascript的“正在播放”横幅中

2 个答案: