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


Posted in Javascript onMarch 08, 2016

一、准备数据库

首先,我们设计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'>
<html xmlns='http://www.w3.org/1999/xhtml' lang='en' xml:lang='en'>
<head>
  <title>Online radio using jQuery</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

  <link href="skin/jplayer.blue.monday.css" rel="stylesheet" type="text/css" />

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
</head>

<body>
  <div id="jquery_jplayer_1" class="jp-jplayer"></div>
    <div class="jp-audio">
      <div class="jp-type-single">
        <div id="jp_interface_1" class="jp-interface">
          <ul class="jp-controls">
            <li><a href="#" class="jp-play" tabindex="1">play</a></li>
            <li><a href="#" class="jp-pause" tabindex="1">pause</a></li>
            <li><a href="#" class="jp-stop" tabindex="1">stop</a></li>
            <li><a href="#" class="jp-mute" tabindex="1">mute</a></li>
            <li><a href="#" class="jp-unmute" tabindex="1">unmute</a></li>
          </ul>

          <div class="jp-progress">
            <div class="jp-seek-bar">
              <div class="jp-play-bar"></div>
            </div>
          </div>

          <div class="jp-volume-bar">
            <div class="jp-volume-bar-value"></div>
          </div>

          <div class="jp-current-time"></div>
          <div class="jp-duration"></div>
        </div>

        <div id="jp_playlist_1" class="jp-playlist">
          <ul>
            <li><strong id="artist">Artist</strong> - <span id="songname">Song name</span></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

 

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

三、读取数据库中的曲目

接下来,我们就可以从数据库中读取要播放的歌曲了,本文将采用ezSQL的PHP开源库去连接数据库,当然你也可以用传统的MYSQL连接方法。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代码如下:

<script type="text/javascript">
//<![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格式。

运行后,可以看到如下播放器的效果:

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

Javascript 相关文章推荐
精心挑选的15款优秀jQuery 本特效插件和教程
Aug 06 Javascript
jquery实现的V字形显示效果代码
Oct 27 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
Oct 28 Javascript
浅析Javascript ES6新增值比较函数Object.is
Aug 24 Javascript
Vuejs第十三篇之组件——杂项
Sep 09 Javascript
微信小程序 textarea 详解及简单使用方法
Dec 05 Javascript
如何制作幻灯片(代码分享)
Jan 06 Javascript
vue实现百度搜索下拉提示功能实例
Jun 14 Javascript
jQuery实现的表格前端排序功能示例
Sep 18 jQuery
jQuery实现的页面详情展开收起功能示例
Jun 11 jQuery
简述ES6新增关键字let与var的区别
Aug 23 Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
Oct 29 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
Mar 08 #Javascript
js实现数组冒泡排序、快速排序原理
Mar 08 #Javascript
Bootstrap多级导航栏(级联导航)的实现代码
Mar 08 #Javascript
javascript html实现网页版日历代码
Mar 08 #Javascript
一道关于JavaScript变量作用域的面试题
Mar 08 #Javascript
理解javascript函数式编程中的闭包(closure)
Mar 08 #Javascript
jQuery实现带水平滑杆的焦点图动画插件
Mar 08 #Javascript
You might like
服务器端解压缩zip的脚本
2006/12/22 PHP
初步介绍PHP扩展开发经验分享
2012/09/06 PHP
zf框架的session会话周期及次数限制使用示例
2014/03/13 PHP
YII2 实现多语言配置的方法分享
2017/01/11 PHP
Laravel中log无法写入问题的解决
2017/06/17 PHP
PHP闭包定义与使用简单示例
2018/04/13 PHP
Laravel框架中缓存的使用方法分析
2019/09/06 PHP
javascript HTMLEncode HTMLDecode的完整实例(兼容ie和火狐)
2009/06/02 Javascript
js输入框邮箱自动提示功能代码实现
2013/12/10 Javascript
textarea焦点的用法实现获取焦点清空失去焦点提示效果
2014/05/19 Javascript
JavaScript通过字符串调用函数的实现方法
2015/03/18 Javascript
高性能JavaScript DOM编程(1)
2015/08/11 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
2015/11/30 Javascript
Three.js学习之Lamber材质和Phong材质
2016/08/04 Javascript
jQuery实现链接的title快速出现的方法
2017/02/20 Javascript
AngularJS 支付倒计时功能实现思路
2017/06/05 Javascript
node+express+ejs使用模版引擎做的一个示例demo
2017/09/18 Javascript
koa router 多文件引入的方法示例
2019/05/22 Javascript
微信小程序 scroll-view 水平滚动实现过程解析
2019/10/12 Javascript
node koa2 ssr项目搭建的方法步骤
2020/12/11 Javascript
python生成随机密码或随机字符串的方法
2015/07/03 Python
Python实现的概率分布运算操作示例
2017/08/14 Python
使用Python AIML搭建聊天机器人的方法示例
2018/07/09 Python
解决python3 HTMLTestRunner测试报告中文乱码的问题
2018/12/17 Python
python创建n行m列数组示例
2019/12/02 Python
Python钉钉报警及Zabbix集成钉钉报警的示例代码
2020/08/17 Python
Canvas环形饼图与手势控制的实现代码
2019/11/08 HTML / CSS
财务部岗位职责
2013/11/19 职场文书
仓库门卫岗位职责
2013/12/22 职场文书
元旦晚会邀请函
2014/01/27 职场文书
学生会主席事迹材料
2014/01/28 职场文书
工程采购员岗位职责
2014/03/09 职场文书
2014镇党委班子对照检查材料思想汇报
2014/09/23 职场文书
JavaScript 实现页面滚动动画
2021/04/24 Javascript
Nginx+Tomcat负载均衡集群的实现示例
2021/10/24 Servers
不同品牌、不同型号对讲机如何互相通联
2022/02/18 无线电