html5的audio實現高仿微信語音播放效果（實際項目）

HTML部分：

<div class="tab-pane fade dialog-record" id="dialogRecord">
                                <volist name="dialogRecord" id="record">
                                    <div class="dialog">
                                        <span class="time">{$record.time}</span>
                                        <span class="text">{$record.asr}</span>
                                        <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>
                                        <audio class="audio">
                                            <source src="{$record.audition_url}"/>
                                        </audio>
                                        <div class="focus" tabindex =0></div>
                                    </div>
                                </volist>
                            </div>

css部分：

.dialog-record .dialog span.text{
    max-width: 83%;
    height: auto;
    background: #0094DE;
    padding-left: 3.5%;
    padding-right: 3.5%;
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 1.3rem;
    color: #fff;
    line-height: 25px;
    border-radius: 5px;
    margin-left: 7px;
    display: inline-block;
    margin-right: 3%;
}
.dialog-record .dialog span.time{
    display: block;
    width: 100%;
    text-align: center;
    margin-bottom: 5px;
    color: #666;
}
.dialog-record .dialog .focus{
    height: 5px;
    outline-style: none;
}
/*播放語音時的動畫*/
@keyframes yuying{
    0%{
        height: 0%;
    }
    20%{
        height: 50%;
    }
    50%{
        height: 90%;
    }
    80%{
        height: 50%;
    }
    100%{
        height: 0%;
    }
}    

.dialog-container{
    width: 40px;
    height: 40px;
    border: 2px solid #0094de;
    border-radius: 8px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
.dialog-container .audio-animation{
    width: 20px;
    height: 20px;
}
.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: 1px;
    height: 50%;
}
#two{
    height: 90%;
}
#three{
    height: 70%;
}
#four{
    height: 40%;
}

JS部分：

        //播放語音
            $('#dialogRecord').on('click','.dialog-container',function(){
                var currentNode = $(this);
                var audioEle  = $(this).siblings('.audio');
                playAudio(currentNode,audioEle);
            });
            function playAudio(currentNode,audioEle){
                /*jquery對象轉換成js對象*/
                var player = audioEle[0]; 
                if (player.paused){ /*如果已經暫停*/
                    player.play(); /*播放*/
                    currentNode.children('.audio-animation').addClass('audioPlay');
                    currentNode.parent().siblings().children('.dialog-container').find('.audio-animation').removeClass('audioPlay');
                }else {
                    player.pause();/*暫停*/
                    currentNode.children('.audio-animation').removeClass('audioPlay');
                }
                // 錄音播放結束停止動畫
                player.addEventListener('ended', function () {  
                    currentNode.children('.audio-animation').removeClass('audioPlay');
                }, false);
            }