0

我正在使用 php 和 javascript 创建一个在线音乐播放器，但我想不出处理问题的最佳方法。我创建了一个 MySQL 数据库，其中包含歌曲的名称、艺术家、专辑等。

我从页面上显示的 MySQL db 生成的 XML 文件创建了一个播放列表，我无法获得的唯一功能是当我单击歌曲时让歌曲的名称出现在“正在播放”横幅中从播放列表。

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

2 回答 2

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 回答
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 回答