基于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 相关文章推荐
LazyLoad 延迟加载(按需加载)
May 31 Javascript
jquery ajax中使用jsonp的限制解决方法
Nov 22 Javascript
用js的document.write输出的广告无阻塞加载的方法
Jun 05 Javascript
jQuery调取jSon数据并展示的方法
Jan 29 Javascript
jQuery控制网页打印指定区域的方法
Apr 07 Javascript
jquery右下角自动弹出可关闭的广告层
May 08 Javascript
Bootstrap实现带动画过渡的弹出框
Aug 09 Javascript
JavaScript SHA-256加密算法详细代码
Oct 06 Javascript
vue cli 全面解析
Feb 28 Javascript
async/await地狱该如何避免详解
May 10 Javascript
浅析Vue.js 中的条件渲染指令
Nov 19 Javascript
微信小程序中如何计算距离某个节日还有多少天
Jul 15 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
php导出csv数据在浏览器中输出提供下载或保存到文件的示例
2014/04/24 PHP
PHP匿名函数和use子句用法实例
2016/03/16 PHP
php探针不显示内存解决方法
2019/09/17 PHP
javascript编程起步(第四课)
2007/02/27 Javascript
js event事件的传递与冒泡处理
2009/12/06 Javascript
关于jQuery UI 使用心得及技巧
2012/10/10 Javascript
js open() 与showModalDialog()方法使用介绍
2013/09/10 Javascript
js螺旋动画效果的具体实例
2013/11/15 Javascript
js几秒以后倒计时跳转示例
2013/12/26 Javascript
浅谈javascript中for in 和 for each in的区别
2015/04/23 Javascript
js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)
2015/07/18 Javascript
jquery 判断selection range 是否在容器中的简单实例
2016/08/02 Javascript
js中获取键盘事件的简单实现方法
2016/10/10 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
2016/11/11 Javascript
React复制到剪贴板的示例代码
2017/08/22 Javascript
vue2.0中set添加属性后视图不能更新的解决办法
2019/02/22 Javascript
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
2019/09/25 Javascript
js实现简单五子棋游戏
2020/05/28 Javascript
python使用opencv驱动摄像头的方法
2018/08/03 Python
两个元祖T1=('a', 'b'),T2=('c', 'd')使用匿名函数将其转变成[{'a': 'c'},{'b': 'd'}]的几种方法
2019/03/05 Python
处理python中多线程与多进程中的数据共享问题
2019/07/28 Python
Python 转换文本编码实现解析
2019/08/27 Python
python装饰器的特性原理详解
2019/12/25 Python
Python3 shutil(高级文件操作模块)实例用法总结
2020/02/19 Python
Python 使用生成器代替线程的方法
2020/08/04 Python
详解python的super()的作用和原理
2020/10/29 Python
最新Python idle下载、安装与使用教程图文详解
2020/11/28 Python
意大利团购网站:Groupon意大利
2016/10/11 全球购物
NYX Professional Makeup英国官网:美国平价专业彩妆品牌
2019/11/13 全球购物
机电工程专业应届生求职信
2013/10/03 职场文书
拾金不昧表扬信范文
2014/01/11 职场文书
询价采购方案
2014/06/09 职场文书
纪念九一八事变演讲稿:青少年应树立远大理想
2014/09/14 职场文书
护士个人年终总结
2015/02/13 职场文书
Python基础详解之描述符
2021/04/28 Python
Vue Mint UI mt-swipe的使用方式
2022/06/05 Vue.js