基于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 相关文章推荐
用js实现的抽象CSS圆角效果!!
May 03 Javascript
js数字输入框(包括最大值最小值限制和四舍五入)
Nov 24 Javascript
Dom 结点创建 基础知识
Oct 01 Javascript
js获取IP地址的方法小结
Jul 01 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
Aug 21 Javascript
Position属性之relative用法
Dec 14 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
Jan 26 Javascript
基于JavaScript实现弹出框效果
Feb 19 Javascript
JS创建对象几种不同方法详解
Mar 01 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
Sep 04 Javascript
vue实现多条件和模糊搜索功能
May 28 Javascript
深入探索VueJS Scoped CSS 实现原理
Sep 23 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
10个实用的PHP代码片段
2011/09/02 PHP
php将html转成wml的WAP标记语言实例
2015/07/08 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
PHP基于进程控制函数实现多线程
2020/12/09 PHP
JavaScript中的History历史对象
2008/01/16 Javascript
Javascript this 的一些学习总结
2012/08/02 Javascript
使用delegate方法为一个tr标签加一个链接
2014/06/27 Javascript
Jquery实现textarea根据文本内容自适应高度
2015/04/03 Javascript
ECMAScript6中Set/WeakSet详解
2015/06/12 Javascript
IE和Firefox之间在JavaScript语法上的差异
2016/04/22 Javascript
Json解析的方法小结
2016/06/22 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
2016/09/27 Javascript
nodejs个人博客开发第三步 载入页面
2017/04/12 NodeJs
Vue DevTools调试工具的使用
2017/12/05 Javascript
javascript实现点击按钮切换轮播图功能
2020/09/23 Javascript
详解Java中String JSONObject JSONArray List转换
2020/11/13 Javascript
基于vue与element实现创建试卷相关功能(实例代码)
2020/12/07 Vue.js
python实现的阳历转阴历(农历)算法
2014/04/25 Python
Python3 加密(hashlib和hmac)模块的实现
2017/11/23 Python
浅析Django中关于session的使用
2019/12/30 Python
Python开发之身份证验证库id_validator验证身份证号合法性及根据身份证号返回住址年龄等信息
2020/03/20 Python
利用python绘制数据曲线图的实现
2020/04/09 Python
HTML5 FileReader对象的具体使用方法
2020/05/22 HTML / CSS
什么是聚集索引和非聚集索引
2012/01/17 面试题
应届大学生求职信
2013/12/01 职场文书
有多年工作经验的自我评价
2014/03/02 职场文书
机关党员2014全国两会学习心得体会
2014/03/10 职场文书
关于安全的标语
2014/06/10 职场文书
5s标语大全
2014/06/23 职场文书
计算机科学与技术专业求职信
2014/09/03 职场文书
2014应届本科生自我评价
2014/09/13 职场文书
学校节水倡议书
2015/04/29 职场文书
2015年城市管理工作总结
2015/05/23 职场文书
2015年美容师个人工作总结
2015/10/14 职场文书
python将图片转为矢量图的方法步骤
2021/03/30 Python
浅谈PostgreSQL表分区的三种方式
2021/06/29 PostgreSQL