jquery audio player

2022-11-01 09:50:12

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8" />
  <title>Audio Player。兼容ie9及以上</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  
  <meta name="viewport" content="width=device-width,initial-scale=1" />  
  <link rel="stylesheet" href="css/audioplayer.css" />
  <script src="js/jquery.js"></script>
  <script src="js/audioplayer.js"></script>
         <!--隐藏音乐控件-->
  <style>
    .audioPlayer1{display:none;}
  </style> 
     <script>
    $(function(){
    //暂停播放 
    $("#stop").click(function(){
    $("audio")[0].pause();
    });
    //播放
    $("#start").click(function(){
      $("audio")[0].play();  
    });
      //播放时长
   $("#duration").click(function(){
     alert($("audio")[0].duration)
   });
       
    });
 
 
  </script>
  
 </head>
 <body> 
 
     <input type="button" id="start"  value="播放"/>
  <input type="button" id="stop"  value="暂停"/>
     <input type="button" id="duration" value="播放时长">
       <!--使用时，音乐控件放置至于画面底部-->
          <div class="audioPlayer1">
   <!-- 文档加载后，自动循环播放。兼容ie9及以上-->  
      <audio src="audio/1.mp3" preload="auto" controls  autoplay loop  ></audio>      
    <div>
 </body>
</html>

上一篇：delegate 为什么用 weak属性


下一篇：一个Struts2的实例