html5的audio实现高仿微信语音播放效果Demo

HTML部分：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>语音助手</title>
    </head>
    <body>
        <div class="dialog-container">
            <div class="audio-animation">
                <div id="one"></div>
                <div id="two"></div>
                <div id="three"></div>
                <div id="four"></div>
            </div>        
        </div>
        <div class="dialog-container">
            <div class="audio-animation">
                <div id="one"></div>
                <div id="two"></div>
                <div id="three"></div>
                <div id="four"></div>
            </div>        
        </div>
    </body>
</html>

CSS部分：

<style type="text/css">
            @keyframes yuying{
                0%{
                    height: 0%;
                }
                20%{
                    height: 50%;
                }
                50%{
                    height: 100%;
                }
                80%{
                    height: 50%;
                }
                100%{
                    height: 0%;
                }
            }    
    
            .dialog-container{
                width: 40px;
                height: 40px;
                margin: 100px auto;    
                border: 3px solid #0094de;
                border-radius: 10px;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .dialog-container .audio-animation{
                width: 26px;
                height: 26px;
            }
            .audioPlay #one{
                animation:yuying 0.6s infinite 0.15s;
               -webkit-animation:yuying 0.6s infinite 0.15s;
            }
            .audioPlay #two{
                animation:yuying 0.6s infinite 0.3s;
               -webkit-animation:yuying 0.6s infinite 0.3s;
            }
            .audioPlay #three{
                animation:yuying 0.6s infinite 0.45s;
               -webkit-animation:yuying 0.6s infinite 0.45s;
            }
            .audioPlay #four{
                animation:yuying 0.6s infinite 0.6s;
               -webkit-animation:yuying 0.6s infinite 0.6s;
            }
            
            #one,#two,#three,#four{
                width:2px;
                border-radius: 50px;
                background-color: #0094de;
                vertical-align: middle;
                display: inline-block;
            }
            #one{
                margin-left: 2px;
                height: 50%;
            }
            #two{
                height: 100%;
            }
            #three{
                height: 70%;
            }
            #four{
                height: 40%;
            }
        </style>

JS部分：

<script type="text/javascript" src="bootstrap/js/jquery.js"></script>
        <script type="text/javascript">
            $(function(){
                $('.dialog-container').click(function(){
                    var childNode = $(this).children('.audio-animation');
                    if (childNode.hasClass('audioPlay')) {
                        childNode.removeClass('audioPlay');
                    }else{
                        childNode.addClass('audioPlay');
                    }
                    $(this).siblings().children('.audio-animation').removeClass('audioPlay');
                })
            })
        </script>

 

posted @ 2019-01-24 17:35  ysx_小鱼  阅读(1840)  评论(0)    收藏  举报