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

用勿龍潛 2012-01-28

展开全文

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

发布时间：2011-05-18 09:53:11 来源：IT168 评论：0 点击：2630 次【字号：大中小】

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

　　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:///songurl.mp3', 'Artist name', 'Song name')

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

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

　　二、设计HTML页面

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

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