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

编辑：rootadmin

推荐整理分享利用jQuery设计一个简单的web音乐播放器的实例分享(jquery的设计模式)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:如何用jquery,jquery用什么编写,使用jquery,使用jquery的步骤,使用jquery实现的项目,jquery示例,使用jquery,使用jquery的步骤,内容如对您有帮助，希望把文章链接给更多的朋友！

一、准备数据库　　首先，我们设计MYSQL数据库如下：

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

二、设计HTML页面　　在完成数据库的设计后，我们就可以开始设计HTML页面了。这里我们首先要下载jQuery的一个音乐播放插件jPlayer( 　　以上代码其实很简单，只是引入了jQuery和jPlayer插件的必须要的文件和样式，然后设置好播放器的外观，这里都是通过DIV去预先定位指定所在的层，比如播放进度条，播放的按钮(开始/暂停)，声音的控制大小等。

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

三、读取数据库中的曲目　　接下来，我们就可以从数据库中读取要播放的歌曲了，本文将采用ezSQL的PHP开源库去连接数据库，当然你也可以用传统的MYSQL连接方法。ezSQL的具体用法我们就不再过多介绍了，这里使用其实很简单，把ez_sql_core.php和ez_sql_mysql.php两个文件放到项目的根目录下即可，我们编写php文件如下，命名为getsong.php，代码如下：

　　这里，用rand()随机在MYSQL中取出一条记录(曲目)，然后分别用变量保存其歌曲的名称，歌手名和地址，将它们用符号“|”连接起来。而因为我们要使用ajax去调用这个PHP,所以注意语句：if(!empty($_SERVER['HTTP_X_REQUESTED_WITH'])&& strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') 　　主要的目的是防止用户在浏览器地址栏中只是输入比如　　最后，我们可以修改jPlayer的代码，让我们的播放器运行起来，修改demo.html代码如下：

　　可以看到，在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格式。　　运行后，可以看到如下播放器的效果：

基于jQuery的网页影音播放器jPlayer的基本使用教程 jPlayer简介：想在网页上播放背景音乐，不想用html标签的方式，因为那样只有音乐全部下载完以后才能播放，还容易出现跨浏览器兼容性的问题，于是选

分享个实用的jQuery代码片段 jQuery是一款优秀的JavaScript库，它在WEB开发者和网页设计师中非常出名，帮助网页设计师开发出很多有创意和漂亮的WEB页面。本文主要分享了个有用的jQ

JQuery Mobile实现导航栏和页脚导航栏由一组水平排列的链接构成，通常位于页眉或页脚内部。默认地，导航栏中的链接会自动转换为按钮（无需data-role="button"）。导航栏部分的代码