js模仿微信语音播放的动画效果

设计思路: 播放时使用js的setInterval来替换png达到动画效果
当前demo语音播放使用插件BenzAMRRecorder.js
如需要用其它js插件来播放语音也很容易集成到本demo

准备素材：

amr.png

css代码:

.btnPlayAmr{
    width:108px;
    height:28px;
    background-size:28px;
    font-size: 14px;
    line-height: 25px;
    border-radius:20px;
    cursor:pointer;
}
.pngOnRight{
    text-align:right;
    background-color: #64d74a;
    background-repeat: no-repeat;
    background-position: right;
}
.rPlay{
    background-image: url(../images/amrR3.png);
}
.rPlay1{
    background-image: url(../images/amrR1.png);
}
.rPlay2{
    background-image: url(../images/amrR2.png);
}
.rPlay3{
    background-image: url(../images/amrR3.png);
}
.pngOnLeft{
    text-align:left;
    background-color: #f6f3d5;
    background-repeat: no-repeat;
    background-position: left;
}
.lPlay{
    background-image: url(../images/amrL3.png);
}
.lPlay1{
    background-image: url(../images/amrL1.png);
}
.lPlay2{
    background-image: url(../images/amrL2.png);
}
.lPlay3{
    background-image: url(../images/amrL3.png);
}

关键js代码:

function alterVoicePng(){
    if (!isPlaying) return;
    var voicePngClass = curVoicePngName + pngNum;
    curPlayVoiceObj.setAttribute("class", voicePngClass);
    pngNum++;
    if (pngNum > 3) pngNum = 1;
}
function startPlayVoice(playId) {
    isPlaying = true;
    pngNum = 1;
    curPlayVoiceId = playId;
    curVoicePngName = curPlayVoiceObj.className;
    //播放时替换png
    taskTimer1 = setInterval(alterVoicePng, 300);
    //播放结束时恢复png
    taskTimer2 = setTimeout(stopPlayVoice, voiceLenMap.get(playId));
}
function stopPlayVoice() {
    if (!isPlaying) return;
    isPlaying = false;
    clearInterval(taskTimer1);
    clearTimeout(taskTimer2);
    curPlayVoiceObj.setAttribute("class", curVoicePngName);
}

部分html:

<table border="1">
        <thead>
        <tr>
            <th style="text-align:center;">序号</th>
            <th style="text-align:center;">from</th>
            <th style="text-align:center;">Voices</th>
            <th style="text-align:center;">to</th>
        </tr>
        </thead>
        <tr align="center">
            <td width="30px;">1</td>
            <td></td>
            <td align="right" width="300px;">
                <div id="voiceDiv1" onclick="jsPlayVoice(this,1)"
                     class="btnPlayAmr pngOnRight rPlay"
                >6.0″&emsp;&emsp;&nbsp;</div>
            </td><td width="50px;">ethan</td>
        </tr>
        <tr align="center">
            <td width="30px;">2</td>
            <td width="50px;">jim</td>
            <td align="left" width="300px;">
                <div id="voiceDiv2" onclick="jsPlayVoice(this,2)"
                     class="btnPlayAmr pngOnLeft lPlay"
                >&emsp;&emsp;&nbsp;4.0″</div>
            </td><td></td>
        </tr>
    </table>

页面展示效果:

demo.html

Demo下载地址 https://download.csdn.net/download/tianbbs2008/23364672