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

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

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

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

准备素材：

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;//播放时替换pngtaskTimer1 = setInterval(alterVoicePng, 300);//播放结束时恢复pngtaskTimer2 = 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下载地址 https://download.csdn.net/download/tianbbs2008/23364672

js模仿微信语音播放的动画效果相关推荐

js模仿微信语音播放的小功能
自己写的一个模仿微信语音播放的小功能,实现的主要功能是:点击播放,点击暂停,播放切换,,, 代码如下: <!DOCTYPE html> <html lang="en&qu ...
php仿微信语音条,html5的audio实现高仿微信语音播放效果
前言之前做过一个微信的项目,专家回复可以录音,然后储存成mp3格式,前台可以获取mp3,客户可以在线试听mp3录音效果,今天就简单分享一下这个效果如何实现,及实现思路和方法! 效果图前台大体呈现效 ...
html5的audio实现高仿微信语音播放效果
效果图前台大体呈现效果图如下: 点击就可以播放mp3格式的录音.点击另外一个录音,当前录音停止! 思路关于播放动画,这个很简单,我们可以用css3的逐帧动画来实现.关于逐帧动画,我之前的文章也写过 ...
html仿微信语音播放器,原生js仿微信音频播放器
今天看个类似微信音频播放器的效果: 简单使用使用比较简单,直接配置如下: var wx_audio = new WxAudio({ ele: ".wx-audio", title ...
微信语音能保存多久服务器,微信语音播放失败？可能是这几个原因导致的，看完你就懂了...
很多朋友在使用手机播放其他好友发送给自己的语音消息时,会出现"语音播放失败"的提示,不知道是什么原因导致的,本期文章就说说导致微信语音播放失败的几个原因,以及可行的解决办法. 一. ...
android让字体左右对齐,Android 模仿微信读书文字左右对齐效果
原标题:Android 模仿微信读书文字左右对齐效果本文作者作者:Amter https://www.jianshu.com/p/020786e22a6f 左右对齐的文字效果,很常见,在大多数文章 ...
Android 悬浮窗功能实现（微信语音通话悬浮窗效果实现）
目录 1.基本介绍 2.代码示例 3.实现效果及便捷工具类 4.仿微信语音通话悬浮窗效果实现 4.1 需求分析及效果展示 4.2 实现 5.最后 1.基本介绍 Android 界面绘制都是通过 Win ...
js设置页面语音播放
js设置页面语音播放 let msg = new SpeechSynthesisUtterance("喷子");console.log(msg)//msg.rate = 4 播放语 ...
微信小程序的动画效果@keyframes
微信小程序的动画效果@keyframes 定义动画的格式: @keyframes 动画名称{ 阶段1{css样式} 阶段2{css样式} 阶段3{css样式} } 每个阶段用百分比表示,即从0%到1 ...

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

js模仿微信语音播放的动画效果相关推荐

最新文章

热门文章