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

缺乏、安全感 2022-09-11 14:13 404阅读 0赞

设计思路: 播放时使用js的setInterval来替换png达到动画效果

当前demo语音播放使用插件BenzAMRRecorder.js

如需要用其它js插件来播放语音也很容易集成到本demo

准备素材：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54ix5Zad5ZKW5ZWh55qE56iL5bqP54y_size_9_color_FFFFFF_t_70_g_se_x_16][]

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

部分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″   </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"
                    >   4.0″</div>
                </td><td></td>
            </tr>
        </table>

页面展示效果：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54ix5Zad5ZKW5ZWh55qE56iL5bqP54y_size_9_color_FFFFFF_t_70_g_se_x_16 1][]

Demo下载地址 [https://download.csdn.net/download/tianbbs2008/23364672][https_download.csdn.net_download_tianbbs2008_23364672]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54ix5Zad5ZKW5ZWh55qE56iL5bqP54y_size_9_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/a6a6214324b14b4da8f508b5a3e2538f.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54ix5Zad5ZKW5ZWh55qE56iL5bqP54y_size_9_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/028f588ccf2e4bfabff27769db24da4e.png
[https_download.csdn.net_download_tianbbs2008_23364672]: https://download.csdn.net/download/tianbbs2008/23364672