vue2.0 结合HTML5原生Audio标签在移动端的使用实现方式，应用场景为钉钉微应用

在做vue2.0钉钉微应用项目，有需要播放音频的是需求，用阿里云sdk播放器不购买相关服务，音频有些播放不了。于是我就直接用HTML5原生的Audio标签自己写音频播放器。（业务需求：记录上次播放位置并从上次播放位置播放，观看进度不满100%不允许快进，满100%方可快进。）以下是整个业务代码：

CSS部分：

.audio-box{
   height:100%;
   width:100%;
   background:rgba(16,32,56,.9);
   position:relative;
   z-index:3000;
   .audio-name{
        width:100%;
        font-size:.14rem;
        color:#eee;
        position:absolute;
        left:0;           
        top: .30rem;
        text-align:center;
        @include ellipsis();
   }
   .perisphere{
       width:3rem;
       height:3rem;
       background:rgba(255,255,255,.3);
       border-radius:100%;
       -moz-border-radius: 100%;
       -webkit-border-radius: 100%;
       position:absolute;
       left:0;
       bottom:0;
       top:0;
       right:0;
       margin:auto;
       z-index:3005;
        @include flexbox();
        @include flex-direction(row);
        @include justify-content(center);
        @include align-items(center);
     .audio-show-img-box{
       width:2.5rem;
       height:2.5rem;
       border-radius:100%;
       -moz-border-radius: 100%;
       -webkit-border-radius: 100%;
        @include flexbox();
        @include flex-direction(row);
        @include justify-content(center);
        @include align-items(center);        
       #audio-show-img{
           width:100%;
           height:100%;
           border-radius:100%;
           -moz-border-radius: 100%;
           -webkit-border-radius: 100%;
        }
       
        
    .audio-play-show {
        -webkit-animation: say 12s linear infinite;
        -moz-animation: say 12s linear infinite;
        -ms-animation: say 12s linear infinite;
        -o-animation: say 12s linear infinite;
        animation: say 12s linear infinite;
    }
    
    .audio-pause-show {
        -webkit-animation: stopSay 2s linear infinite;
        -moz-animation: stopSay 2s linear infinite;
        -ms-animation: stopSay 2s linear infinite;
        -o-animation: stopSay 2s linear infinite;
        animation: stopSay 2s linear infinite;
    }
    
    @-webkit-keyframes say {
        0% {}
        100% {
            -webkit-transform: rotateZ(360deg);
        }
    }
    
    @-moz-keyframes say {
        0% {}
        100% {
            -moz-transform: rotateZ(360deg);
        }
    }
    
    @-ms-keyframes say {
        0% {}
        100% {
            -ms-transform: rotateZ(360deg);
        }
    }
    
    @-o-transforms say {
        0% {}
        100% {
            -o-transform: rotateZ(360deg);
        }
    }
    
    @keyframes say {
        0% {}
        100% {
            transform: rotateZ(360deg);
        }
    }
    
    @-webkit-keyframes stopSay {
        0% {}
        100% {
            -webkit-transform: rotateZ(0);
        }
    }
    
    @-moz-keyframes stopSay {
        0% {}
        100% {
            -moz-transform: rotateZ(0);
        }
    }
    
    @-ms-keyframes stopSay {
        0% {}
        100% {
            -ms-transform: rotateZ(0);
        }
    }
    
    @-o-transforms stopSay {
        0% {}
        100% {
            -o-transform: rotateZ(0);
        }
    }
    
    @keyframes stopSay {
        0% {}
        100% {
            transform: rotateZ(0);
        }
    }

       
     }
 
   .audio-play-img-box{
       width:2.5rem;
       height:2.5rem;
       border-radius:100%;
       -moz-border-radius: 100%;
       -webkit-border-radius: 100%;      
       position:absolute;
       left:0;
       bottom:0;
       top:0;
       right:0;
       margin:auto;
       z-index:4100;
        @include flexbox();
        @include flex-direction(row);
        @include justify-content(center);
        @include align-items(center);
        display:none;
        .show-play-img{
               height:1rem;
               width:1rem;
               margin:.75rem 0 0 .75rem;
               cursor:pointer;
               
              
       }    
   }
}
   .load-title{
            width:100%;
            font-size:.12rem;
            color:#eee;
            position:absolute;
            left:0;           
            bottom: .54rem;
            text-align:center;
            @include ellipsis();
       }
   .audio-control{
       width:100%;
       height:.44rem;
       background:rgba(0,0,0,.6);
       position:absolute;
       left:0;
       bottom:0;
       z-index:3100;
        @include flexbox();
        @include flex-direction(row);
         @include justify-content(space-around);
        @include align-items(center);
        
       .audio-play-control{
           height:.26rem;
           width:.22rem;
           background:url('../../static/icon-audio-pause.png') no-repeat center center;
           background-size:100% 100%;
           margin-left:.12rem;
           cursor:pointer;
       }
       .size{
             font-size:.12rem;
             color:#fff;
             float: left;
             display: block;
         }
         .timeshow{
             font-size:.12rem;
             color:#fff;
             float: right;
            display: block;
         }
       .right-timeUpdata{
            height:100%;       
            width:2rem;
            @include flexbox();
            @include flex-direction(row);
            @include align-items(center);
           .timeline{               
                height: .04rem;
                width:100%;
                background-color: rgba(256, 256, 256, 0.6);
                border-radius: 5px;
                position: relative;
                z-index: 3100;                
                span{
                    position: relative;
                    width: 0px;
                    height: .04rem;            
                    background: #0188fd;
                    box-shadow: inset 1px 1px 1px 0 rgba(0,0,0,.06);
                    border-radius: .10rem;
                    -moz-border-radius: .10rem;
                    -webkit-border-radius: .10rem;
                    display: block;
                    -webkit-transition: width ease-out 0.3s;
                    -o-transition: width ease-out 0.3s;
                    transition: width ease-out 0.3s;
                }
                span:after{
                    content: "";
                    position: absolute;
                    top: -.05rem;
                    right: 0;
                     width: .12rem;
                     height: .12rem;
                    border-radius: 100%;
                    -moz-border-radius: 100%;
                    -webkit-border-radius: 100%;
                     background: #0188fd;
                }
           }

       }
   }
}

 

HTMl部分：

 

js部分：

 

效果如下：