<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>

.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: %;

}

        //播放语音

            $('#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);

            }