js仿微信语音播放
html结构如下:
<div class="app-voice-you" voiceSrc="xx.mp3">
<img class="app-voice-headimg" src="xx.png" />
<div style="width: 60%;" class="app-voice-state-bg">
<div class="app-voice-state app-voice-pause"></div>
</div>
<div class="app-voice-time app-voice-unread">
1'6"
</div>
</div> <!--语音播放控件-->
<audio id="audio_my" src="">
Your browser does not support the audio tag.
</audio>
核心功能就是语音播放,主要包括了以下几个功能点:
红点表明未听语音,语音听过后,红点会消失;
将“未读”状态的样式独立出来,“已读”的时候,把样式删除就行。结合本地存储处理就搞定了。
//this是点击的语音的document
var app_voice_time = this.getElementsByClassName("app-voice-time")[0];
if(app_voice_time.className.indexOf("app-voice-unread") != -1){
//存在红点时,把红点样式删除
app_voice_time.className = app_voice_time.className.replace("app-voice-unread","");
}
第一次听语音,会自动播放下一段语音;
这里主要是使用HTML5的audio控件的“语音播放完”事件
语音播放完,找到下一个语音,播放下一个语音
//语音播放完事件(PAGE.audio是audio控件的document)
PAGE.audio.addEventListener('ended', function () {
//循环获取下一个节点
PAGE.preVoice = PAGE.currentVoice;
var currentVoice = PAGE.currentVoice;
while(true){
currentVoice = currentVoice.nextElementSibling;//下一个兄弟节点
//已经到达最底部
if(!currentVoice){
PAGE.preVoice.getElementsByClassName("app-voice-state")[0].className = "app-voice-state app-voice-pause";
return false;
}
var voiceSrc = currentVoice.getAttribute("voiceSrc");
if(voiceSrc && voiceSrc != ""){
break;
}
}
if(!PAGE.autoNextVoice){
PAGE.preVoice.getElementsByClassName("app-voice-state")[0].className = "app-voice-state app-voice-pause";
return false;
}
PAGE.currentVoice = currentVoice;
//获取得到下一个语音节点,播放
PAGE.audio.src = voiceSrc;
PAGE.audio.play();
PAGE.Event_PlayVoice();
}, false);
每段语音可以暂停、继续播放、重新播放;
这个比较简单,但是也是比较多逻辑。需要变换样式告诉用户,怎样是继续播放/重新播放。
播放中的语音有动画,不是播放中的语音则会停止动画。
这里主要是CSS3动画的应用
.app-voice-pause,.app-voice-play{
height: 18px;
background-repeat: no-repeat;
background-image: url(../img/voice.png);
background-size: 18px auto;
opacity: 0.5;
}
.app-voice-you .app-voice-pause{
/*从未播放*/
background-position: 0px -39px;
}
.app-voice-you .app-voice-play{
/*播放中(不需要过渡动画)*/
background-position: 0px -39px;
-webkit-animation: voiceplay 1s infinite step-start;
-moz-animation: voiceplay 1s infinite step-start;
-o-animation: voiceplay 1s infinite step-start;
animation: voiceplay 1s infinite step-start;
}
@-webkit-keyframes voiceplay {
0%,
100% {
background-position: 0px -39px;
}
33.333333% {
background-position: 0px -0px;
}
66.666666% {
background-position: 0px -19.7px;
}
}
js仿微信语音播放的更多相关文章
- html5的audio实现高仿微信语音播放效果
效果图 前台大体呈现效果图如下: 点击就可以播放mp3格式的录音.点击另外一个录音,当前录音停止! 思路 关于播放动画,这个很简单,我们可以用css3的逐帧动画来实现.关于逐帧动画,我之前的文章也写过 ...
- js模仿微信语音播放的小功能
自己写的一个模仿微信语音播放的小功能,实现的主要功能是:点击播放,点击暂停,播放切换,,, 代码如下: <!DOCTYPE html> <html lang="en&qu ...
- html5的audio实现高仿微信语音播放效果(实际项目)
HTML部分: <div class="tab-pane fade dialog-record" id="dialogRecord"> <vo ...
- html5的audio实现高仿微信语音播放效果Demo
HTML部分: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t ...
- 纯css3配合vue实现微信语音播放效果
前言 每次写点东西都扯两句-0-,这几天一半精力放在移动端,一半维护之前的项目.书也少看了,不过还好依旧保持一颗学习的心.对于css3我是之前有专门整理过的,因此对于原理之前也算了解.今天是项目中遇到 ...
- uniapp+nvue开发之仿微信语音+视频通话功能 :实现一对一语音视频在线通话
本篇文章是利用uni-app和nvue实现微信效果功能的第三篇了,今天我们基于uniapp + nvue实现的uniapp仿微信音视频通话插件实例项目,实现了以下功能: 1: 语音通话 2: 视频 ...
- Android 高仿微信语音聊天页面高斯模糊效果
目前的应用市场上,使用毛玻璃效果的APP随处可见,比如用过微信语音聊天的人可以发现,语音聊天页面就使用了高斯模糊效果. 先看下效果图: 仔细观察上图,我们可以发现,背景图以用户头像为模板,对其进行了高 ...
- Svelte3.x网页聊天实例|svelte.js仿微信PC版聊天svelte-webchat
基于Svelte3+SvelteKit+Sass仿微信Mac界面聊天实战项目SvelteWebChat. 基于svelte3+svelteKit+sass+mescroll.js+svelte-lay ...
- Android开发--仿微信语音对讲录音
原文地址:http://www.2cto.com/kf/201502/378704.html 自微信出现以来取得了很好的成绩,语音对讲的实现更加方便了人与人之间的交流.今天来实践一下微信的语音对讲的录 ...
随机推荐
- javascript函数小练习
求n-m之间数据的和 <script> function num(n,m){ var sum=0; for (var i = n; i <= m; i++) { sum+=i; } ...
- JavaScript 函数声明,函数表达式,匿名函数,立即执行函数之区别
函数声明:function fnName () {-};使用function关键字声明一个函数,再指定一个函数名,叫函数声明. 函数表达式 var fnName = function () {-};使 ...
- A Taxonomy of Parallel Processor Architectures
COMPUTER ORGANIZATION AND ARCHITECTURE DESIGNING FOR PERFORMANCE NINTH EDITION
- 加快ArcGIS Server创建缓存速度,CachingTools的实例数
大比例尺的缓存,由于文件非常大,创建非常花费时间,在硬件设备已固定的情况下,调整Caching tools的实例数是加快创建缓存的方法之一. 简单来说:CachingTools的最大并行实例数决定了C ...
- selenium定位页面元素的一件趣事
PS:本博客selenium分类不会记载selenium打开浏览器,定位元素,操作页面元素,切换到iframe,处理alter.confirm和prompt对话框这些在网上随处可见的信息:本博客此分类 ...
- cxf spring restful 问题解决(jar包冲突)
SEVERE: Context initialization failedorg.springframework.beans.factory.BeanCreationException: Error ...
- PMP--综合考试知识点,持续更新中。。。
1]盈亏平衡点=固定成本/(销售价格-可变成本). 2]项目管理(Project Management): 就是把各种知识.技能.手段和技术应用于项目活动之中,以达到项目的要求. 3]有效的管理要求项 ...
- 延时调用的php代码
比如我们想做一个类似于康盛uchome的定时触发任务,任务靠用户访问触发的,但是你触发任务是不能影响用户本身对页面的访问速度(也就是说不能任务执行十秒钟你就让用户等待十秒钟)刚好昨天把这个弄完了.拿出 ...
- Golang Import使用入门
我们在写Go代码的时候经常用到import这个命令用来导入包文件,而我们经常看到的方式参考如下: import( "fmt" ) 然后我们代码里面可以通过如下的方式调用 fmt.P ...
- Integer.toBinaryString()的源代码解析
private static String toUnsignedString(int i, int shift) { char[] buf = new char[32];//i是要整形,这里得把它化成 ...