JQuery网页音乐播放器制作

远离繁华

    IT168 有一篇关于Jquery制作网页播放器的文章(http://hb.qq.com/a/20110508/000005.htm)，这里引用了他的Div+css表现形式，再此表示感谢。不过他那个是用ezSQL连接数据库，并且播放音乐是随机从数据库中选择一首。这对于网站开发来说是不够的，在下不才，稍做更改，以实用于程序系统。

    相对于原系统主要做了以下更改：

1、数据库访问采用经典的php+mysql连接方式；

2、音乐播放采用按需播放，通过网页地址动态获取音乐id。

 

演示地址：http://lelelipin.com/demo/

 

主要代码如下：

play.php:

此代码中加入了js动态获取url中数据的函数和jquery.get方法，也是更改关键所在。

1. <title>Demo : jPlayer as an audio player</title>
   
2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   
3. 
   
4. <link href="skin/jplayer.blue.monday.css" rel="stylesheet" type="text/css" />
   
5. 
   
6. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
   
7. <script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
   
8. <script type="text/javascript">
   
9. //<![CDATA[
   
10. 
    
11. $(document).ready(function(){
    
12. 
    
13.   //js获取url中id
    
14. 
    
15.             function GetRequest() {
    
16. 
    
17.                var url = location.search; //获取url中"?"符后的字串
    
18. 
    
19.                var theRequest = new Object();
    
20. 
    
21.                if (url.indexOf("?") != -1) {
    
22. 
    
23.               var str = url.substr(1);
    
24. 
    
25.               strs = str.split("&");
    
26. 
    
27.               for(var i = 0; i < strs.length; i ++) {
    
28. 
    
29.              theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
    
30. 
    
31.               }
    
32. 
    
33.                }
    
34. 
    
35.                return theRequest;
    
36. 
    
37.                 }
    
38. 
    
39.             var Request = new Object();
    
40. 
    
41.             Request = GetRequest();
    
42. 
    
43.             var id;
    
44. 
    
45.             id = Request['id'];
    
46. //end
    
47. 
    
48.     $.get("getsong.php?id="+id);
    
49. 
    
50. 
    
51. 
    
52. 
    
53.     $("#jquery_jplayer_1").jPlayer({
    
54.         ready: function () {
    
55. 
    
56.             var data = $.ajax({
    
57.              url: "getsong.php?id="+id,
    
58.              async: false
    
59.              }).responseText;
    
60. 
    
61.          var string = data.split('|');
    
62.             $(this).jPlayer("setMedia", {
    
63.                 mp3: string[0]
    
64.             }).jPlayer("play");
    
65. 
    
66.             $('#singer').html(string[1]);
    
67.             $('#songname').html(string[2]);
    
68.         },
    
69.         ended: function (event) {
    
70.             var data = $.ajax({
    
71.              url: "getsong.php?id="+id,
    
72.              async: false
    
73.              }).responseText;
    
74. 
    
75.          var string = data.split('|');
    
76.             $(this).jPlayer("setMedia", {
    
77.                 mp3: string[0]
    
78.             }).jPlayer("play");
    
79. 
    
80.             $('#singer').html(string[1]);
    
81.             $('#songname').html(string[2]);
    
82.      },
    
83.         swfPath: "js",
    
84.         supplied: "mp3"
    
85.     });
    
86. });
    
87. //]]>
    
88. </script>
    
89. 
    
90.         <div id="jquery_jplayer_1" class="jp-jplayer"></div>
    
91. 
    
92.         <div class="jp-audio">
    
93.             <div class="jp-type-single">
    
94.                 <div id="jp_interface_1" class="jp-interface">
    
95.                     <ul class="jp-controls">
    
96.                         <li><a href="#" class="jp-play" tabindex="1">play</a></li>
    
97.                         <li><a href="#" class="jp-pause" tabindex="1">pause</a></li>
    
98.                         <li><a href="#" class="jp-stop" tabindex="1">stop</a></li>
    
99.                         <li><a href="#" class="jp-mute" tabindex="1">mute</a></li>
    
100.                         <li><a href="#" class="jp-unmute" tabindex="1">unmute</a></li>
     
101.                     </ul>
     
102.                     <div class="jp-progress">
     
103.                         <div class="jp-seek-bar">
     
104.                             <div class="jp-play-bar"></div>
     
105.                         </div>
     
106.                     </div>
     
107.                     <div class="jp-volume-bar">
     
108.                         <div class="jp-volume-bar-value"></div>
     
109.                     </div>
     
110.                     <div class="jp-current-time"></div>
     
111.                     <div class="jp-duration"></div>
     
112.                 </div>
     
113.                 <div id="jp_playlist_1" class="jp-playlist">
     
114.                     <ul>
     
115.                         <li><strong id="singer">Singer</strong> - <span id="songname">Song name</span></li>
     
116.                     </ul>
     
117.                 </div>
     
118.             </div>
     
119.         </div>

getsong.php：

1. <?php
   
2. 
   
3. 
   
4. 
   
5.     include_once("config/conn.php");
   
6. 
   
7. 
   
8.     $id=$_GET['id'];
   
9. 
   
10.     $sql_song = "SELECT * FROM h_song WHERE id='".$id."'";
    
11.     //$sql_song = "SELECT * FROM h_song ORDER BY RAND() LIMIT 1";
    
12. 
    
13.     $result_song = mysql_query($sql_song);
    
14.     $row_song = @mysql_fetch_array($result_song);
    
15. 
    
16. 
    
17. 
    
18.     $singer = $row_song[singer];
    
19.     $songname = $row_song[songname];
    
20.     $url = $row_song[downloadurl];
    
21.     $separator = '|';
    
22.     echo $url.$separator.$singer.$separator.$songname;
    
23. 
    
24. 
    
25. ?>

数据库：

1. create table h_song(
   
2. id int not null auto_increment primary key,
   
3. classid int not null,
   
4. songname varchar(100) not null,
   
5. singer varchar(50) not null,
   
6. downloadurl varchar(100) null,
   
7. downamound int null,
   
8. recommend int null,
   
9. uploadid int not null,
   
10. uptime date not null,
    
11. hit int null,
    
12. remark text null
    
13. );

 jQuery.jPlayer.2.1.0.zip