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