使用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;
    });

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

 

 

 

你可能感兴趣的:(html,jquery,数据库,function,Class,音乐)