html5 微信播放语音,html5的audio实现高仿微信语音播放效果
前言
之前做过一个微信的项目,专家回复可以录音,然后储存成mp3格式,前台可以获取mp3,客户可以在线试听mp3录音效果,今天就简单分享一下这个效果如何实现,及实现思路和方法!
效果图
前台大体呈现效果图如下:
点击就可以播放mp3格式的录音。点击另外一个录音,当前录音停止!
思路
关于播放动画,这个很简单,我们可以用css3的逐帧动画来实现。关于逐帧动画,我之前的文章也写过:http://www.haorooms.com/post/zhuzhen_dh
图片如下:
除了动画之外,剩下的就是js对audio的控制了。
html5 audio
关于html5 audio标签,有很多属性,大家可以搜索一下,例如preload、autoplay、loop、controls等等。让其隐藏,我们可以添加一个隐藏参数,代码如下:
这样,这个audio 就可以隐藏显示,接下来我们就可以用js对其进行操作控制了。
audio常用方法
addTextTrack()向音频/视频添加新的文本轨道
canPlayType() 检测浏览器是否能播放指定的音频/视频类型
load()重新加载音频/视频元素
play()开始播放音频/视频
pause()暂停当前播放的音频/视频
audio常用事件
事件对我们非常有用,可以通过判断音频是否加载完成,来进行动画的操作,例如,我们点击录音,先有一个加载loading动画,然后在变成我们前面所讲的逐帧动画。
abort当音频/视频的加载已放弃时
canplay当浏览器可以播放音频/视频时
canplaythrough当浏览器可在不因缓冲而停顿的情况下进行播放时
durationchange当音频/视频的时长已更改时
emptied当目前的播放列表为空时
ended当目前的播放列表已结束时
error当在音频/视频加载期间发生错误时
loadeddata当浏览器已加载音频/视频的当前帧时
loadedmetadata当浏览器已加载音频/视频的元数据时
loadstart当浏览器开始查找音频/视频时
pause当音频/视频已暂停时
play当音频/视频已开始或不再暂停时
playing当音频/视频在已因缓冲而暂停或停止后已就绪时
progress当浏览器正在下载音频/视频时
ratechange当音频/视频的播放速度已更改时
seeked当用户已移动/跳跃到音频/视频中的新位置时
seeking当用户开始移动/跳跃到音频/视频中的新位置时
stalled当浏览器尝试获取媒体数据,但数据不可用时
suspend当浏览器刻意不获取媒体数据时
timeupdate当目前的播放位置已更改时
volumechange当音量已更改时
waiting当视频由于需要缓冲下一帧而停止
例如如下代码:
audio.onloadedmetadata = function () {
$(_this).removeClass("loading");
$(_this).addClass("playing");
}
当音频文件已经加载到浏览器之后,去除加载动画,增加播放动画。
js 操作音频文件播放暂停
如下代码可以控制audio播放还是暂停
var audio = document.getElementById('haorooms');
if(audio!==null){
//检测播放是否已暂停.audio.paused 在播放器播放时返回false.
alert(audio.paused);
if(audio.paused) {
audio.play();//audio.play();// 这个就是播放
}else{
audio.pause();// 这个就是暂停
}
}
当然也可以通过jquery轻松操作!
var audio = $(that).children("audio")[0];//获取,这段代码直接从我们文件中copy而来,可以直接写$("audio")[0]
audio.load();//加载
audio.play();//播放
audio.pause();//暂停
值得注意的是,我们可以用定时器来让语音播放结束之后,动画去掉。
定时器可以用setTimeout来写!关于setTimeout,可以看我之前的文章!
定时器是一个变量!
var second=$(that).data("second");//获取音频秒数
_this.dshiqi=setTimeout(function(){ //dshiqi是外层定义好的一个变量!
$(that).removeClass("playing");//播放完毕去除动画
},second*1000)
记得在每次切换点击的时候,清除之前的定时器
clearTimeout(_this.dshiqi);
不清除定时器,来回点击录音,会有问题!
上面就是对html5的audio实现高仿微信语音播放效果简单总结,欢迎留言交流!
html5 微信播放语音,html5的audio实现高仿微信语音播放效果相关推荐
- php仿微信语音条,html5的audio实现高仿微信语音播放效果
前言 之前做过一个微信的项目,专家回复可以录音,然后储存成mp3格式,前台可以获取mp3,客户可以在线试听mp3录音效果,今天就简单分享一下这个效果如何实现,及实现思路和方法! 效果图 前台大体呈现效 ...
- html5的audio实现高仿微信语音播放效果
效果图 前台大体呈现效果图如下: 点击就可以播放mp3格式的录音.点击另外一个录音,当前录音停止! 思路 关于播放动画,这个很简单,我们可以用css3的逐帧动画来实现.关于逐帧动画,我之前的文章也写过 ...
- Kotlin高仿微信-项目实践58篇
Kotlin高仿微信项目实践主要包含5大模块: 1.Web服务器 2.Kotlin客户端 3.Xmpp即时通讯服务器 4.视频通话服务器 5.腾讯云服务器 另外也有Flutter版本高仿微信功能,Fl ...
- Flutter高仿微信-项目实践59篇
Flutter高仿微信(支持Android和IOS系统) Flutter高仿微信主要包含5大模块: 1.Web服务器 2.Flutter客户端 3.Xmpp即时通讯服务器 4.视频通话服务器 5.腾讯 ...
- html 表情转换器,HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能
之前做过一版h5微信聊天移动端,这段时间闲来无事就整理了下之前项目,又重新在原先的那版基础上升级了下,如是就有了现在的h5仿微信聊天高仿版,新增了微聊.通讯录.探索.我四个模块 左右触摸滑屏切换,聊天 ...
- html5微信超链接对话窗口,HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能...
之前做过一版h5微信聊天移动端,这段时间闲来无事就整理了下之前项目,又重新在原先的那版基础上升级了下,如是就有了现在的h5仿微信聊天高仿版,新增了微聊.通讯录.探索.我四个模块 左右触摸滑屏切换,聊天 ...
- Flutter高仿微信-第36篇-单聊-语音通话
Flutter高仿微信系列共59篇,从Flutter客户端.Kotlin客户端.Web服务器.数据库表结构.Xmpp即时通讯服务器.视频通话服务器.腾讯云服务器全面讲解. 详情请查看 效果图: 目前市 ...
- iOS高仿微信悬浮窗、忍者小猪游戏、音乐播放器、支付宝、今日头条布局滚动效果等源码...
iOS精选源码 iOS WKWebView的使用源码 模仿apple music 小播放器的交互实现 高仿微信的悬浮小窗口 iOS仿支付宝首页效果 [swift]仿微信悬浮窗 类似于今日头条,网易新闻 ...
- Flutter高仿微信-第47篇-群聊-语音
Flutter高仿微信系列共59篇,从Flutter客户端.Kotlin客户端.Web服务器.数据库表结构.Xmpp即时通讯服务器.视频通话服务器.腾讯云服务器全面讲解. 详情请查看 效果图: 详情 ...
- android高仿微信聊天页面,Android 高仿微信语音聊天页面高斯模糊(毛玻璃效果)
目前的应用市场上,使用毛玻璃效果的APP随处可见,比如用过微信语音聊天的人可以发现,语音聊天页面就使用了高斯模糊效果. 先看下效果图: 仔细观察上图,我们可以发现,背景图以用户头像为模板,对其进行了高 ...
最新文章
- 【c语言】蓝桥杯算法训练 十进制数转八进制数
- EventBus设计与实现分析——事件的发布
- C#中字典集合HashTable、Dictionary、ConcurrentDictionary三者区别
- 开源Easydarwin流媒体服务器Windows编译、配置、部署
- 解决Linux 忘记root 密码的办法
- 第一章课后习题及答案
- C#对象初始化的探讨
- java代码实现画板_求好心人帮找或做个JAVA画板程序 代码,主要能实现简单的画板功能!...
- python 文本处理 保留中英文和标点符号_问一下处理英文文本
- linux应用之Lamp(apache+mysql+php)的源码安装(centos)
- 4道过滤菜鸟的iOS面试题
- ACL'22 | 基于强化学习的实体对齐
- jcodec_java-jcodec-有人看过该库的文档吗?
- C语言教程-Turbo C
- Android 加载天地图
- 计算机网络中的ttl怎么理解,Ping值中“TTL”是什么意思,为什么使用“TTL”这个概念?...
- 机器学习项目实战——08浅层网络之葡萄酒分类
- 有关“十二生肖”的成语
- debian下配置防火墙iptables
- 手机刷机的几种常用方法
热门文章
- Saliency Detection: A Spectral Residual Approach
- 《禅者的初心》读书笔记(3)
- cad卸载不干净_Mac软件卸载不干净?你可以试试AppCleaner
- c++设计某小型公司的 employee(人员)类
- python中除法运算定律_除法的简便运算的公式
- EAUML日拱一卒-活动图::活动分区
- 如何用VBA寻找指定区域中的第一个非空单元格
- 标准SPI、DUAL SPI、Quad SPI;NorFlash、NandFlash、eMMC闪存的比较与区别
- amd支持服务器内存,AMD专用内存和普通内存的区别是什么?
- Google离开我们快十年了