Chinaunix首页 | 论坛 | 博客
  • 博客访问: 80237
  • 博文数量: 22
  • 博客积分: 486
  • 博客等级: 下士
  • 技术积分: 225
  • 用 户 组: 普通用户
  • 注册时间: 2011-07-15 21:30
文章分类

全部博文(22)

文章存档

2013年(2)

2012年(4)

2011年(16)

分类: 系统运维

2011-09-14 01:55:22

    IT168 有一篇关于Jquery制作网页播放器的文章(),这里引用了他的Div+css表现形式,再此表示感谢。不过他那个是用ezSQL连接数据库,并且播放音乐是随机从数据库中选择一首。这对于网站开发来说是不够的,在下不才,稍做更改,以实用于程序系统。
    相对于原系统主要做了以下更改:
1、数据库访问采用经典的php+mysql连接方式;
2、音乐播放采用按需播放,通过网页地址动态获取音乐id。
 
演示地址:
 
主要代码如下:
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. <link href="skin/jplayer.blue.monday.css" rel="stylesheet" type="text/css" />

  4. <script type="text/javascript" src=""></script>
  5. <script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
  6. <script type="text/javascript">
  7. //<![CDATA[

  8. $(document).ready(function(){

  9.   //js获取url中id

  10.             function GetRequest() {

  11.                var url = location.search; //获取url中"?"符后的字串

  12.                var theRequest = new Object();

  13.                if (url.indexOf("?") != -1) {

  14.               var str = url.substr(1);

  15.               strs = str.split("&");

  16.               for(var i = 0; i < strs.length; i ++) {

  17.              theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);

  18.               }

  19.                }

  20.                return theRequest;

  21.                 }

  22.             var Request = new Object();

  23.             Request = GetRequest();

  24.             var id;

  25.             id = Request['id'];
  26. //end

  27.     $.get("getsong.php?id="+id);




  28.     $("#jquery_jplayer_1").jPlayer({
  29.         ready: function () {

  30.             var data = $.ajax({
  31.              url: "getsong.php?id="+id,
  32.              async: false
  33.              }).responseText;

  34.          var string = data.split('|');
  35.             $(this).jPlayer("setMedia", {
  36.                 mp3: string[0]
  37.             }).jPlayer("play");

  38.             $('#singer').html(string[1]);
  39.             $('#songname').html(string[2]);
  40.         },
  41.         ended: function (event) {
  42.             var data = $.ajax({
  43.              url: "getsong.php?id="+id,
  44.              async: false
  45.              }).responseText;

  46.          var string = data.split('|');
  47.             $(this).jPlayer("setMedia", {
  48.                 mp3: string[0]
  49.             }).jPlayer("play");

  50.             $('#singer').html(string[1]);
  51.             $('#songname').html(string[2]);
  52.      },
  53.         swfPath: "js",
  54.         supplied: "mp3"
  55.     });
  56. });
  57. //]]>
  58. </script>

  59.         <div id="jquery_jplayer_1" class="jp-jplayer"></div>

  60.         <div class="jp-audio">
  61.             <div class="jp-type-single">
  62.                 <div id="jp_interface_1" class="jp-interface">
  63.                     <ul class="jp-controls">
  64.                         <li><a href="#" class="jp-play" tabindex="1">play</a></li>
  65.                         <li><a href="#" class="jp-pause" tabindex="1">pause</a></li>
  66.                         <li><a href="#" class="jp-stop" tabindex="1">stop</a></li>
  67.                         <li><a href="#" class="jp-mute" tabindex="1">mute</a></li>
  68.                         <li><a href="#" class="jp-unmute" tabindex="1">unmute</a></li>
  69.                     </ul>
  70.                     <div class="jp-progress">
  71.                         <div class="jp-seek-bar">
  72.                             <div class="jp-play-bar"></div>
  73.                         </div>
  74.                     </div>
  75.                     <div class="jp-volume-bar">
  76.                         <div class="jp-volume-bar-value"></div>
  77.                     </div>
  78.                     <div class="jp-current-time"></div>
  79.                     <div class="jp-duration"></div>
  80.                 </div>
  81.                 <div id="jp_playlist_1" class="jp-playlist">
  82.                     <ul>
  83.                         <li><strong id="singer">Singer</strong> - <span id="songname">Song name</span></li>
  84.                     </ul>
  85.                 </div>
  86.             </div>
  87.         </div>
getsong.php:
  1. <?php



  2.     include_once("config/conn.php");


  3.     $id=$_GET['id'];

  4.     $sql_song = "SELECT * FROM h_song WHERE id='".$id."'";
  5.     //$sql_song = "SELECT * FROM h_song ORDER BY RAND() LIMIT 1";

  6.     $result_song = mysql_query($sql_song);
  7.     $row_song = @mysql_fetch_array($result_song);



  8.     $singer = $row_song[singer];
  9.     $songname = $row_song[songname];
  10.     $url = $row_song[downloadurl];
  11.     $separator = '|';
  12.     echo $url.$separator.$singer.$separator.$songname;


  13. ?>
数据库:
  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   
阅读(1660) | 评论(2) | 转发(0) |
0

上一篇:2011年最佳代码

下一篇:php面试题

给主人留下些什么吧!~~

a60917312012-03-30 21:08:01

大哥
我想請問一下
有無sql檔可提供呢
想請教若我的音樂是放在資料夾 路徑連結到mysql中
那要如何設定資料庫路徑並且讀取後撥放呢
拜託了
謝謝大大

tkchks2011-09-16 14:15:36

原来是jQuery写的呀。我还以为是flash的