基于jQuery实现音乐播放试听列表


Posted in Javascript onApril 14, 2016

 本文为大家分享了jQuery实现的音乐播放试听列表,可以实现播放,暂停,自动获取音频路径功能,具体内容如下

基于jQuery实现音乐播放试听列表

1.html文件    

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>音乐播放试听列表</title>
 </head>
 <body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<div class="modal-content" id="music_list_box">
 <div class="row music_list_li" id="music_list_li_height" style="">
  <div class="col-xs-12">
   <ol class="list-unstyled user_music_list_ol" id="play_list_ol">
    <audio id="myAudio" src="">你的浏览器不支持音频播放</audio>
    <li class="user_music_list">
     <label>MusicNAME1</label>
     <a href="#" id="MusicNAME1" class="user_doplay" name="stoped">
      <img src="http://sandbox.runjs.cn/uploads/rs/424/shsayjwv/play.png">
     </a>
    </li>
    <li class="user_music_list">
     <label>MusicNAME2</label>
     <a href="#" id="MusicNAME2" class="user_doplay" name="stoped">
      <img src="http://sandbox.runjs.cn/uploads/rs/424/shsayjwv/play.png">
     </a>
    </li>
    <li class="user_music_list">
     <label>MusicNAME3</label>
     <a href="#" id="MusicNAME3" class="user_doplay" name="stoped">
      <img src="http://sandbox.runjs.cn/uploads/rs/424/shsayjwv/play.png">
     </a>
    </li>
    <li class="user_music_list">
     <label>MusicNAME4</label>
     <a href="#" id="MusicNAME4" class="user_doplay" name="stoped">
      <img src="http://sandbox.runjs.cn/uploads/rs/424/shsayjwv/play.png">
     </a>
    </li>
    <li class="user_music_list">
     <label>MusicNAME5</label>
     <a href="#" id="MusicNAME5" class="user_doplay" name="stoped">
      <img src="http://sandbox.runjs.cn/uploads/rs/424/shsayjwv/play.png">
     </a>
    </li>       
   </ol>
   <script type="text/javascript" src="play.js"></script><!-- 播放/暂停 -->
  </div>
 </div>
</div>
 </body>
</html>

2.run.js

//
//  @author FUCMLIF
//  @date 2016/4/6
//
jQuery("a.user_doplay").click(function(){
 var x = document.getElementById("myAudio");
 if (x.paused) {
  jQuery("a.user_doplay").find('img').attr('src','http://sandbox.runjs.cn/uploads/rs/424/shsayjwv/play.png');
  jQuery(this).find('img').attr('src','http://sandbox.runjs.cn/uploads/rs/424/shsayjwv/stop.png');
  jQuery(this).attr("name","playing");
  x.play(); //播放
 } else if (x.play && jQuery(this).attr("name") == "stoped") {
  jQuery('#myAudio').attr('src',jQuery(this).attr('id') + '.mp3');//修改音频路径
  jQuery("a.user_doplay").find('img').attr('src','http://sandbox.runjs.cn/uploads/rs/424/shsayjwv/play.png');
  jQuery(this).find('img').attr('src','http://sandbox.runjs.cn/uploads/rs/424/shsayjwv/stop.png');
  jQuery("#play_list_ol").find('a').attr('name','stoped');
  jQuery(this).attr("name","playing");
  x.play(); //播放
 } else if (x.play && jQuery(this).attr("name") == "playing") {
  jQuery(this).find('img').attr('src','http://sandbox.runjs.cn/uploads/rs/424/shsayjwv/play.png');
  jQuery("#play_list_ol").find('a').attr('name','stoped');
  x.pause(); //暂停
 } else {
  alert("这个提示不应该出现");
 }
});

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
jQuery调用WebService的实现代码
Jun 19 Javascript
jquery 获取dom固定元素 添加样式的简单实例
Feb 04 Javascript
js中this的用法实例分析
Jan 10 Javascript
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
Mar 04 Javascript
JS实现兼容各浏览器解析XML文档数据的方法
Jun 01 Javascript
Vue.Js中的$watch()方法总结
Mar 23 Javascript
vue.js中mint-ui框架的使用方法
May 12 Javascript
详解React Native网络请求fetch简单封装
Aug 10 Javascript
vue-router相关基础知识及工作原理
Mar 16 Javascript
讲解vue-router之什么是嵌套路由
May 28 Javascript
JS canvas绘制五子棋的棋盘
May 28 Javascript
原生JS实现弹幕效果的简单操作指南
Nov 10 Javascript
js仿3366小游戏选字游戏
Apr 14 #Javascript
Javascript实现鼠标框选操作  不是点击选取
Apr 14 #Javascript
Node.js实现数据推送
Apr 14 #Javascript
node.js实现端口转发
Apr 14 #Javascript
即将发布的jQuery 3 有哪些新特性
Apr 14 #Javascript
谈一谈JS消息机制和事件机制的理解
Apr 14 #Javascript
Kindeditor在线文本编辑器如何过滤HTML
Apr 14 #Javascript
You might like
世界上第一台立体声收音机
2021/03/01 无线电
虚拟主机中对PHP的特殊设置
2006/10/09 PHP
PHP的面试题集
2006/11/19 PHP
php采集时被封ip的解决方法
2010/08/29 PHP
php empty,isset,is_null判断比较(差异与异同)
2010/10/19 PHP
PHP 正则表达式小结
2015/02/12 PHP
Yii2中Restful API原理实例分析
2016/07/25 PHP
php获取ajax的headers方法与内容实例
2017/12/27 PHP
PHP实现的敏感词过滤方法示例
2019/03/06 PHP
javascript与cookie 的问题详解
2013/11/11 Javascript
jQuery多项选项卡的实现思路附样式及代码
2014/06/03 Javascript
在JavaScript中访问字符串的子串
2015/07/07 Javascript
使用jQuery给input标签设置默认值
2016/06/20 Javascript
JS对象深度克隆实例分析
2017/03/16 Javascript
vue实现百度搜索下拉提示功能实例
2017/06/14 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
2017/12/07 Javascript
Vue项目中添加锁屏功能实现思路
2018/06/29 Javascript
js全屏事件fullscreenchange 实现全屏、退出全屏操作
2019/09/17 Javascript
详解Typescript 内置的模块导入兼容方式
2020/05/31 Javascript
[48:22]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
基于python的汉字转GBK码实现代码
2012/02/19 Python
python数据结构之二叉树的统计与转换实例
2014/04/29 Python
python利用beautifulSoup实现爬虫
2014/09/29 Python
Python多进程同步简单实现代码
2016/04/27 Python
python安装pil库方法及代码
2019/06/25 Python
Python守护进程实现过程详解
2020/02/10 Python
Python实现冒泡排序算法的完整实例
2020/11/04 Python
你正在寻找的CSS3 动画技术
2011/07/27 HTML / CSS
详解使用HTML5 Canvas创建动态粒子网格动画
2016/12/14 HTML / CSS
美国名牌太阳镜折扣网站:Eyedictive
2017/05/15 全球购物
《自选商场》教学反思
2014/02/14 职场文书
安卓程序员求职信
2014/02/28 职场文书
Python中Permission denied的解决方案
2021/04/02 Python
html5中sharedWorker实现多页面通信的示例代码
2021/05/07 Javascript
Python基础数据类型tuple元组的概念与用法
2021/08/02 Python
基于Redis6.2.6版本部署Redis Cluster集群的问题
2022/04/01 Redis