使用jplayer来制作音乐播放插件

首先来介绍以下网址：

http://www.happyworm.com/jquery/jplayer/

在这里，你可以下到jplayer的demos(也就是已经做好的，直接可以用的），或者sourse文件（只有播放音乐的那部分js和swf）

 

作为一个jquery的超级新手，我只是想实现播放音乐这个功能，所以直接先下载demo，然后可以适当修改css，让它变得不一样些~~

 

好了，先来介绍一下如果你下到一个demo，你可以使用修改哪些部分

 

js里的文件我完全没有修改，因为里面是实现播放的那部分

 

所以主要是查看在demo文件里的

//使用了js里的jplayer文件

//这里是重点，能不能播放看这里

有了这段代码以后，其实你已经可以播放音乐了，只是整个页面是空空的，因为没有写现实播放器的html和css

所以，现在你知道下面那些html就是用来显示的！！

 

我做的另一件事就是播放音乐的时候现实音乐的名字，歌手等信息，当然这些信息不是静态的，是从数据库调出来的

 

这里，我提供一个思路，就是将要显示的那部分代码，以display：block的方式先放在html页面里，如下所示

foreach( $file_array as $arr_row)
                      {
                      echo "";    
                            echo "

";
                                echo $arr_row["MP3_title"];    
                            echo "

";
                      echo "";                          
                      echo "

";
                              echo $arr_row["MP3_path"];    
                      echo "

";    
                      echo "

";
                                  echo"
• ".$arr_row["MP3_title"]."
";
                                echo"
• 歌手：".$arr_row["MP3_artist"]."
";
                                echo"
• 专辑名称：".$arr_row["MP3_album"]."
";
                                echo"
• 歌曲类型：".$arr_row["MP3_genre"]."
";
                         echo "

";
                        echo "

";
                              echo $arr_row["MP3_ID"];    
                            echo "

";
                      }

这是我现实所有文件的php代码

标红部分的作用，就是通过左键点击span.demo1的时候，jquery可以得到$("span.demo1").next().text()和$("span.demo1").next().next().html(),这样呢，得到前者是这样可以让jquery得到歌曲的路径，用来播放，使用函数为：$("#jquery_jplayer").jPlayer("setFile",p_text).jPlayer("play");

得到后者是用jquery的replaceWith函数将html代码重新附到播放文件的div里面，这样播放器可以显示出歌手，专辑等信息了

代码如下：

$('span.demo1').bind("dblclick",function(){
        var p_text=$(this).next().text();
        var metadata=$(this).next().next().html();
        //alert(metadata);
        //alert(title);       
        $("#music_bar").fadeIn();
        $("#jplayer_playlist ul").replaceWith("

"+metadata+"

");
        $("#jquery_jplayer").jPlayer("setFile",p_text).jPlayer("play");
        return false;
    });

好了，基本上这样就完成了我从数据库里找到音乐，并播放和查看歌曲信息的功能了，上图~~