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

 

html5的audio实现高仿微信语音播放效果(实际项目)

上一篇:Identityserver4之.net core web客户端的接入过程


下一篇:「小程序JAVA实战」小程序的关注功能(65)