基于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 相关文章推荐
JavaScript脚本性能的优化方法
Feb 02 Javascript
超级酷和最实用的jQuery实例收集(20个)
Apr 21 Javascript
JS获取当前日期时间并定时刷新示例
Mar 04 Javascript
浅谈Javascript中Object与Function对象
Sep 26 Javascript
使用JavaScript实现弹出层效果的简单实例
May 31 Javascript
详解node-ccap模块生成captcha验证码
Jul 01 Javascript
简易Vue评论框架的实现(父组件的实现)
Jan 08 Javascript
解决select2在bootstrap modal中不能正常使用的问题
Aug 09 Javascript
js实现图片3D轮播效果
Sep 21 Javascript
JS浏览器BOM常见操作实例详解
Apr 27 Javascript
js实现简单的点名器随机色实例代码
Sep 20 Javascript
Vue中使用JsonView来展示Json树的实例代码
Nov 16 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&amp;java(三)
2006/10/09 PHP
PHP 七大优势分析
2009/06/23 PHP
php编程实现获取excel文档内容的代码实例
2011/06/28 PHP
PHP+MYSQL会员系统的登陆即权限判断实现代码
2011/09/23 PHP
JS中encodeURIComponent函数用php解码的代码
2012/03/01 PHP
实现获取http内容的php函数分享
2014/02/16 PHP
php使用Header函数,PHP_AUTH_PW和PHP_AUTH_USER做用户验证
2016/05/04 PHP
值得分享的php+ajax实时聊天室
2016/07/20 PHP
php生成条形码的图片的实例详解
2017/09/13 PHP
laravel框架实现敏感词汇过滤功能示例
2020/02/15 PHP
javascript 客户端验证上传图片的大小(兼容IE和火狐)
2009/08/15 Javascript
js中对函数设置默认参数值的3种方法
2015/10/23 Javascript
详解用node-images 打造简易图片服务器
2017/05/08 Javascript
jQuery简单绑定单个事件的方法示例
2017/06/10 jQuery
ES6 javascript中Class类继承用法实例详解
2017/10/30 Javascript
vue2实现数据请求显示loading图
2017/11/28 Javascript
详解vue-cli脚手架中webpack配置方法
2018/08/22 Javascript
基于Koa(nodejs框架)对json文件进行增删改查的示例代码
2019/02/02 NodeJs
AjaxFileUpload.js实现异步上传文件功能
2019/04/19 Javascript
原生js实现trigger方法示例代码
2019/05/22 Javascript
js实现翻牌小游戏
2020/07/31 Javascript
[00:56]PWL开团时刻DAY8——追追追追追!
2020/11/09 DOTA
[04:20]DOTA2-DPC中国联赛 正赛 VG vs LBZS 选手采访 1月19日
2021/03/11 DOTA
使用Python判断IP地址合法性的方法实例
2014/03/13 Python
Python写的一个简单DNS服务器实例
2014/06/04 Python
python中format()函数的简单使用教程
2018/03/14 Python
python贪婪匹配以及多行匹配的实例讲解
2018/04/19 Python
python钉钉机器人运维脚本监控实例
2019/02/20 Python
简单介绍python封装的基本知识
2019/08/10 Python
python实现高斯(Gauss)迭代法的例子
2019/11/20 Python
python中round函数保留两位小数的方法
2020/12/04 Python
工程管理专业个人求职信范文
2013/12/07 职场文书
商场中秋节活动方案
2014/02/07 职场文书
2015年超市工作总结
2015/04/09 职场文书
幼儿园春季开学通知
2015/07/16 职场文书
反邪教学习心得体会
2016/01/15 职场文书