图形界面如下图：

HTML代码如下：

        
    
               
     
      
       -00:00
       
          
       
        
         
          
         
                      
          
           
                        
            
                           
             
                            
              
                                       
               
                
                             
                 
                  
                             
                   
        注：①、
                   
                    -00:00 这里是音频播放的倒计时，默认设置为-00:00就好②、
                    
                     这里是上图中的蓝色进度条，样式可自己设置③、
                     
                      ，这么写是为了避免页面加载的时候就加载了音频，导致页面刷新速度跟不上，实则为
                      
                       ，下面的js会进行处理
                      
                     
                    
                   
                  
                 
                
               
              
             
            
           
          
         
        
       
      
     
    

    javascript代码如下

$(function () {  var playing, l0, $audios = $('audio');  //计算音频剩余的长度 单位：秒  function leftTimePlay(a, total, ct) {    a = parseInt(a),    a >= 0 || (a = 0);    var b = parseInt(a / 60),    c = a % 60;    10 > b && (b = "0" + b);    10 > c && (c = "0" + c);    $('.leftTime').html("-" + b + ":" + c);    //更新播放的进度    var p = ct/total;    p = p*100;    p = p.toFixed(5);    p = p+"%";    $('.pslider').css({width: p});        if (c == 00) {      // window.clearInterval(playing);      // window.clearInterval(l0);      // $('#play-btn').removeClass('play').addClass('pause');      // $('#play-btn').parent().attr('title','暂停');    }  }  $('#play-btn').click(function(){    var $this = $(this), src = $this.prev('audio').get(0);    if ($this.hasClass('loaded')) {      if (src.paused) {        src.play();        $this.removeClass('pause').addClass('play');        $this.parent().attr('title','暂停');      } else {        src.pause();        $this.removeClass('play').addClass('pause');        $this.parent().attr('title','播放');      }    } else {      $this.removeClass('pause').addClass('play');      $this.parent().attr('title','暂停');      $this.addClass('loaded');      src.src = $(src).data('src');      src.play();    }    l0 = window.setInterval(function() {        leftTimePlay(src.duration - src.currentTime, src.duration, src.currentTime);    }, 1000);  });    //页面加载完后自动播放  $('#play-btn').click();});