演示地址：http://runjs.cn/detail/3hifs6k1
html代码如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>音乐播放试听列表</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> </head> <body> <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>song1</label> <a href="#" id="horse" 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>song2</label> <a href="#" id="song" 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>song3</label> <a href="#" id="horse3" 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>song4</label> <a href="#" id="horse4" 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>song5</label> <a href="#" id="horse5" class="user_doplay" name="stoped"> <img src="http://sandbox.runjs.cn/uploads/rs/424/shsayjwv/play.png"> </a> </li> </ol> </div> </div> </div> </body> </html> |
play.js的内容如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
// // @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('#myAudio').attr('src','http://www.w3school.com.cn/i/' + jQuery(this).attr('id') + '.mp3');//修改音频路径 jQuery(this).attr("name","playing"); x.play(); //播放 } else if (x.play && jQuery(this).attr("name") == "stoped") { jQuery('#myAudio').attr('src','http://www.w3school.com.cn/i/' + 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("这个提示不应该出现"); } }); //隔行变色 $(document).ready(function(){ $('#play_list_ol>li:even').attr('class','bgcolor'); }); |
此代码不包含样式，请自行美化样式
play.js会自动获取<a></a>的ID作为音频文件的路径，如需修改路径，请修改play.js的这行代码：
|
1 |
jQuery('#myAudio').attr('src',jQuery(this).attr('id') + '.mp3');//修改音频路径 |
文章评论 暂无评论
暂无评论