利用jQuery设计一个简单的web音乐播放器的实例分享

一、准备数据库

　　首先，我们设计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,代码如下：