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 =></div>
                                    </div>
                                </volist>
                            </div>

css部分：

.dialog-record .dialog span.text{
    max-width: %;
    height: auto;
    background: #0094DE;
    padding-left: 3.5%;
    padding-right: 3.5%;
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: .3rem;
    color: #fff;
    line-height: 25px;
    border-radius: 5px;
    margin-left: 7px;
    display: inline-block;
    margin-right: %;
}
.dialog-record .dialog span.time{
    display: block;
    width: %;
    text-align: center;
    margin-bottom: 5px;
    color: #;
}
.dialog-record .dialog .focus{
    height: 5px;
    outline-style: none;
}
/*播放语音时的动画*/
@keyframes yuying{
    %{
        height: %;
    }
    %{
        height: %;
    }
    %{
        height: %;
    }
    %{
        height: %;
    }
    %{
        height: %;
    }
}    
 
.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 .6s infinite .15s;
   -webkit-animation:yuying .6s infinite .15s;
}
.audioPlay #two{
    animation:yuying .6s infinite .3s;
   -webkit-animation:yuying .6s infinite .3s;
}
.audioPlay #three{
    animation:yuying .6s infinite .45s;
   -webkit-animation:yuying .6s infinite .45s;
}
.audioPlay #four{
    animation:yuying .6s infinite .6s;
   -webkit-animation:yuying .6s infinite .6s;
}
 
#one,#two,#three,#four{
    width:2px;
    border-radius: 50px;
    background-color: #0094de;
    vertical-align: middle;
    display: inline-block;
}
#one{
    margin-left: 1px;
    height: %;
}
#two{
    height: %;
}
#three{
    height: %;
}
#four{
    height: %;
}

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[];
                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);
            }