recherche

Maison >interface Web >js tutoriel >Implémentation d'une liste d'écoute de lecture de musique basée sur jQuery_jquery

Implémentation d'une liste d'écoute de lecture de musique basée sur jQuery_jquery

WBOY
WBOYoriginal
2016-05-16 15:05:441347parcourir

Cet article partage avec vous la liste d'écoute de lecture de musique implémentée par jQuery, qui peut réaliser la lecture, la pause et obtenir automatiquement la fonction de chemin audio. Le contenu spécifique est le suivant
.

Fichier 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" >
  <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("这个提示不应该出现");
 }
});

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Explication détaillée des compétences d'itération de tableau javaScript method_javascriptArticle suivant：Explication détaillée des compétences d'itération de tableau javaScript method_javascript

Articles Liés

Voir plus