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

首先来介绍以下网址：

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

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

 

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

 

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

 

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

 

所以主要是查看在demo文件里的<script>里的js文件

 

//使用了jquery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>

//使用了js里的jplayer文件
<script src="js/jquery.jplayer.min.js" type="text/javascript"></script>

//这里是重点，能不能播放看这里
<script type="text/javascript"><!--
$(document).ready(function(){

    // Local copy of jQuery selectors, for performance.
    var jpPlayTime = $("#jplayer_play_time");
    var jpTotalTime = $("#jplayer_total_time");

    $("#jquery_jplayer").jPlayer({
        ready: function () {
            this.element.jPlayer("setFile", "http://www.miaowmusic.com/audio/mp3/Miaow-07-Bubble.mp3", "http://www.miaowmusic.com/audio/ogg/Miaow-07-Bubble.ogg").jPlayer("play");
        },  //必须有！！蓝色部分是mp3路径，绿色部分是歌词路径，最后那部分说明直接开始播放
        volume: 50,
        oggSupport: true,
        preload: 'none'
    })
    .jPlayer("onProgressChange", function(loadPercent, playedPercentRelative, playedPercentAbsolute, playedTime, totalTime) {
        jpPlayTime.text($.jPlayer.convertTime(playedTime));
        jpTotalTime.text($.jPlayer.convertTime(totalTime));
    })
    .jPlayer("onSoundComplete", function() {
        this.element.jPlayer("play");
    });
});
// --></script>

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

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

 

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

 

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

foreach( $file_array as $arr_row)
                      {
                      echo "<span class='demo1' >";    
                            echo "<div class='filename'>";
                                echo $arr_row["MP3_title"];    
                            echo "</div>";
                      echo "</span>";                          
                      echo "<p style='display:none'>";
                              echo $arr_row["MP3_path"];    
                      echo "</p>";    
                      echo "<ul style='display:none'>";
                                  echo" <li>".$arr_row["MP3_title"]."</li>";
                                echo" <li>歌手：".$arr_row["MP3_artist"]."</li>";
                                echo" <li>专辑名称：".$arr_row["MP3_album"]."</li>";
                                echo" <li>歌曲类型：".$arr_row["MP3_genre"]."</li>";
                         echo " </ul>";
                        echo "<p style='display:none'>";
                              echo $arr_row["MP3_ID"];    
                            echo "</p>";
                      }

这是我现实所有文件的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("<ul>"+metadata+"</ul>");
        $("#jquery_jplayer").jPlayer("setFile",p_text).jPlayer("play");
        return false;
    });

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