梦想之鹰的天空

天高任鸟飞......放飞....心情..........放飞.....梦想

日志

关于我

梦想之鹰

非淡泊无以明志非宁静无以致远

文章分类

使用jQuery插件设计在线音乐播放器

2011-05-11 16:56:06| 分类：程序设计 | 标签： |举报 |字号大中小订阅

下载LOFTER 我的照片书 |

jQuery的确是十分强大的工具，在网页上，你甚至可以用它配合其他jQuery插件设计一款在线网页播放器。本文就介绍了如何使用PHP,CSS和jQuery及一个开源的jQuery插件jPlayer，设计一个简单的在线网页音乐播放器。

　　一、准备数据库

　　首先，我们设计MYSQL数据库如下：

CREATE TABLE `songs` (

`song_id` int(11) NOT NULL AUTO_INCREMENT,

`url` varchar(500) NOT NULL,

`artist` varchar(250) NOT NULL,

`title` varchar(250) NOT NULL,

PRIMARY KEY (`song_id`)

) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;

　　这里，url字段表示是mp3音乐的存放地址,artist是歌曲的演唱者，title是歌曲的名称。我们再加入一些样例数据，如下：

INSERT INTO `songs` (`song_id`, `url`, `artist`, `title`) VALUES ('', 'http://mysongs.com/songurl.mp3', 'Artist name', 'Song name');

INSERT INTO `songs` (`song_id`, `url`, `artist`, `title`) VALUES ('', 'http://mysongs.com/anothersongurl.mp3', 'Another artist', 'Another song');

INSERT INTO `songs` (`song_id`, `url`, `artist`, `title`) VALUES ('', 'http://mysongs.com/onemoresongurl.mp3', 'One more artist', 'One more song');

　　二、设计HTML页面

　　在完成数据库的设计后，我们就可以开始设计HTML页面了。这里我们首先要下载jQuery的一个音乐播放插件jPlayer(http://jplayer.org/)。把下载下来的包解压缩后，把js和skin两个文件夹的内容放到你的应用的根目录下，它们是要用到的javascript文件和CSS样式应用文件。现在可以开始设计HTML页了，把文件命名为demo.html,代码如下：

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>

<head>

<title>Online radio using jQuery</title>

</head>

<body>

<li><a href="#" class="jp-pause" tabindex="1">pause</a></li>

<li><a href="#" class="jp-unmute" tabindex="1">unmute</a></li>

</ul>

</div>

</div>

</div>

<ul>

<li><strong id="artist">Artist</strong> - <span id="songname">Song name</span></li>

</ul>

</div>

</body>

</html>

　　以上代码其实很简单，只是引入了jQuery和jPlayer插件的必须要的文件和样式，然后设置好播放器的外观，这里都是通过DIV去预先定位指定所在的层，比如播放进度条，播放的按钮(开始/暂停)，声音的控制大小等。

　　三、读取数据库中的曲目

　　接下来，我们就可以从数据库中读取要播放的歌曲了，本文将采用ezSQL的PHP开源库去连接数据库，当然你也可以用传统的MYSQL连接方法。ezSQL的使用方法教程见这篇文章(http://www.catswhocode.com/blog/php-fast-and-easy-sql-queries-using-ezsql)。使用其实很简单，把ez_sql_core.php和ez_sql_mysql.php两个文件放到项目的根目录下即可，我们编写php文件如下，命名为getsong.php，代码如下：

<?php

if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest'){

include_once "ez_sql_core.php";

include_once "ez_sql_mysql.php";

$db = new ezSQL_mysql('db_user','db_password','db_name','db_host');

$song = $db->get_row("SELECT * FROM songs ORDER BY RAND() LIMIT 1");

$artist = $song->artist;

$songname = $song->title;

$url = $song->url;

$separator = '|';

echo $url.$separator.$artist.$separator.$songname;

}

?>

　　这里，用rand()随机在MYSQL中取出一条记录(曲目)，然后分别用变量保存其歌曲的名称，歌手名和地址，将它们用符号“|”连接起来。而因为我们要使用ajax去调用这个PHP,所以注意语句：

if(!empty($_SERVER['HTTP_X_REQUESTED_WITH'])&& strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest')

　　主要的目的是防止用户在浏览器地址栏中只是输入比如http://www.yousite.com/getsong.php就能获得歌曲的URL地址，只允许是通过AJAX发出的请求才予以接受。

　　四、最终实现完善代码

　　最后，我们可以修改jPlayer的代码，让我们的播放器运行起来，修改demo.html代码如下：

//<![CDATA[

$(document).ready(function(){

$("#jquery_jplayer_1").jPlayer({

ready: function () {

var data = $.ajax({

url: "getsong.php",

async: false

}).responseText;

var string = data.split('|');

$(this).jPlayer("setMedia", {

mp3: string[0]

}).jPlayer("play");

$('#artist').html(string[1]);

$('#songname').html(string[2]);

},

ended: function (event) {

var data = $.ajax({

url: "getsong.php",

async: false

}).responseText;

var string = data.split('|');

$(this).jPlayer("setMedia", {

mp3: string[0]

}).jPlayer("play");

$('#artist').html(string[1]);

$('#songname').html(string[2]);

},

swfPath: "js",

supplied: "mp3"

});

//]]>

</script>

　　可以看到，在jPlayer插件的ready方法中，发起了一个ajax请求，请求getsong.php, 随机地获得一首播放的歌曲，然后对返回的数据重新用split方法分割“|”符号，其中得出的字符串数组string[0]即为mp3歌曲的URL地址，stringp[1]为歌手的名称，这里通过

　　$('#artist').html(string[1])显示出来， $('#songname').html(string[2])则显示出歌的名称。swfPath指定该播放器的FLASH所在的目录为js目录，当然你可以自己定义路径，supplied指出只支持MP3格式。

　　运行后，可以看到如下播放器的效果：

读取数据库中的曲目

　　代码下载地址为：http://www.catswhocode.com/blog/wp-content/uploads/2011/05/cwc-radio-player.zip

评论这张

转发至微博

阅读(703)| 评论(0)

历史上的今天

this.p={  m:2,
              b:2,
              loftPermalink:'',
              id:'fks_095066081087089066087083095095087086084068085082087069',
              blogTitle:'使用jQuery插件设计在线音乐播放器',
              blogAbstract:'jQuery的确是十分强大的工具，在网页上，你甚至可以用它配合其他jQuery插件设计一款在线网页播放器。本文就介绍了如何使用PHP,CSS和jQuery及一个开源的jQuery插件jPlayer，设计一个简单的在线网页音乐播放器。  <P\><SPAN style=\"COLOR: rgb(128,0,0);\"\><B\>　　一、准备数据库</B\></SPAN\></P\>  <P\>　　首先，我们设计MYSQL数据库如下：</P\>  <DIV style=\"BORDER-BOTTOM: windowtext 0.5pt solid; BORDER-LEFT: windowtext 0.5pt solid; PADDING-BOTTOM: 4px; PADDING-LEFT: 5.4pt; WIDTH: 97%; PADDING-RIGHT: 5.4pt; BACKGROUND: rgb(230,230,230); WORD-BREAK: break-all; BORDER-TOP: windowtext 0.5pt solid; BORDER-RIGHT: windowtext 0.5pt solid; PADDING-TOP: 4px;\" id=\"div_code\"\>  <STYLE type=\"text/css\"\>#div_code img{border:0px;}</STYLE\>    </DIV\>',
              blogTag:'',
              blogUrl:'blog/static/3057141620114114566655',
              isPublished:1,
              istop:false,
              type:0,
              modifyTime:0,
              publishTime:1305104166655,
              permalink:'blog/static/3057141620114114566655',
              commentCount:0,
              mainCommentCount:0,
              recommendCount:0,
              bsrk:-100,
              publisherId:0,
              recomBlogHome:false,
              currentRecomBlog:false,
              attachmentsFileIds:[],
              vote:{},
              groupInfo:{},
              friendstatus:'none',
              followstatus:'unFollow',
              pubSucc:'',
              visitorProvince:'',
              visitorCity:'',
              visitorNewUser:false,
              postAddInfo:{},
              mset:'000',
              mcon:'',
              srk:-100,
              remindgoodnightblog:false,
              isBlackVisitor:false,
              isShowYodaoAd:false,
              hostIntro:'非淡泊无以明志 非宁静无以致远',
              hmcon:'1',
              selfRecomBlogCount:'0',
              lofter_single:'<iframe width="140" height="560" style="overflow:hidden;" src="http://www.lofter.com/mailEntry.do?blogad=1&blog" frameBorder="0"></iframe>'
            }

{list a as x}
    {if !!x}
    <div class="iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
      {if x.visitorName==visitor.userName}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        {if x.moveFrom=='wap'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/wapblog.html?frompersonalbloghome"><span title="来自网易手机博客" class="iblock wapIcon"> </span></a>
        {elseif x.moveFrom=='iphone'}
          <a class="noul pnt" target="_blank"><span title="来自iPhone客户端" class="iblock iphoneIcon"> </span></a>
        {elseif x.moveFrom=='android'}
          <a class="noul pnt" target="_blank"><span title="来自Android客户端" class="iblock androidIcon"> </span></a>
        {elseif x.moveFrom=='mobile'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/emsblog.html?frompersonalbloghome"><span title="来自网易短信写博" class="iblock wapIcon"> </span></a>
        {/if}
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
          ${fn(x.visitorNickname,8)|escape}
        </a>
      </div>
    </div>
    {/if}
    {/list}

<#--最新日志，群博日志--> <#--推荐日志-->

<p class="fc06">推荐过这篇日志的人：</p>
    <div>
      {list a as x}
      {if !!x}
      <div class="iblock nbw-fce nbw-f40">
        <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
        <img alt="${x.recommenderNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.recommenderName)}"/>
        </a>
        <div class="cwd thide">
          <a class="fc03 m2a" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
            ${fn(x.recommenderNickname,6)|escape}
          </a>
        </div>
      </div>
      {/if}
      {/list}
    </div>
    {if !!b&&b.length>0}
    <p  class="fc06">他们还推荐了：</p>
    <ul>
    {list b as y}
      {if !!y}
        <li class="rrb"><span class="iblock">·</span><a class="fc03 m2a" target="_blank" href="http://blog.163.com/${y.recommendBlogPermalink}/?from=blog/static/3057141620114114566655">${y.recommendBlogTitle|escape}</a></li>
      {/if}
    {/list}
    </ul>
    {/if}

<#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇，下一篇--> <#-- 热度 -->

{list a as x}
    {if !!x}
    <div class="hotItem iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
      {if x.publisherUsername==visitor.userName}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
          ${fn(x.publisherNickname,8)|escape}
        </a>
      </div>
      <a class="f-myLikeIcons hottype {if x.type==1} js-liketype{elseif x.type==2} js-reblogtype{elseif x.type==3} js-sharetype{else}{/if}" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/"> </a>
    </div>
    {/if}
    {/list}

<#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->

页脚

我的照片书 - 手机博客 - 下载LOFTER APP - 订阅此博客

梦想之鹰的天空

导航

日志

使用jQuery插件设计在线音乐播放器

历史上的今天

最近读者

热度

评论

页脚