微信+html5+播放音频+自动播放,html5音频实现微信语音播放效果
前台的一般效果图如下:
单击以播放mp3录音. 单击另一录音,当前录音停止!
关于播放,这非常简单,我们可以使用css3逐帧来实现. 关于逐帧,我以前的文章还写道:
图片如下:
除外,其余都是音频的js控制.
关于html5音频标签,您可以搜索许多属性,例如预加载,自动播放,循环,控件等. 要隐藏它,我们可以添加一个隐藏参数,代码如下:
通过这种方式,可以隐藏和显示音频,然后我们可以使用js对其进行控制.
addTextTrack()向音频/视频添加新的文本轨道canPlayType()检测浏览器是否能播放指定的音频/视频类型load()重新加载音频/视频元素play()开始播放音频/视频pause()暂停当前播放的音频/视频
该事件对我们非常有用. 您可以通过判断是否加载了音频来执行操作,例如,我们单击记录微信语音播放器 手机版,首先有一个加载,然后它就变成了我们前面提到的逐帧.
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");}
将音频文件加载到浏览器后,删除加载的并增加播放的.
以下代码可以控制音频播放或暂停
varaudio =document.getElementById('haorooms');if(audio!==null){//检测播放是否已暂停.audio.paused 在播放器播放时返回false.alert(audio.paused);if(audio.paused){audio.play();//audio.play();// 这个就是播放 }else{audio.pause();// 这个就是暂停}}
当然,它可以通过jquery轻松操作!
varaudio =$(that).children("audio")[0];//获取,这段代码直接从我们文件中copy而来,可以直接写$("audio")[0]audio.load();//加载audio.play();//播放audio.pause();//暂停
值得注意的是,语音播放结束后,我们可以使用计时器删除.
可以使用setTimeout编写计时器!关于setTimeout,您可以阅读我以前的文章!
计时器是一个变量!
varsecond=$(that).data("second");//获取音频秒数_this.dshiqi=setTimeout(function(){//dshiqi是外层定义好的一个变量!$(that).removeClass("playing");//播放完毕去除},second*1000)
请记住微信语音播放器 手机版,每次切换点击都会清除上一个计时器
clearTimeout(_this.dshiqi);
如果您不清除计时器,请来回单击录音,这会出现问题!
以上是对具有微信的html5的音频播放效果的简单总结. 欢迎留言!
本文来自电脑杂谈,转载请注明本文网址:
http://www.pc-fly.com/a/shouji/article-246449-1.html
微信+html5+播放音频+自动播放,html5音频实现微信语音播放效果相关推荐
- html5audio音频自动缓冲,HTML5网络音频卡住了(缓冲问题?)(HTML5 web audio getting stuck (buffering issue?))...
HTML5网络音频卡住了(缓冲问题?)(HTML5 web audio getting stuck (buffering issue?)) 我正在制作一个(每周广播节目)音频网站,我一直遇到同样的问题 ...
- html5拨打电话自动录音,html5实现手机触摸出现录音以及离开停止录音并上传的功能(代码)...
本篇文章给大家带来的内容是关于html5实现手机触摸出现录音以及离开停止录音并上传的功能(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 以下是实现功能实例: html var ...
- HTML随音乐播放时间自动歌词,JavaScript实时监听歌曲播放进度显示对应歌词
前言 在之前我就想试试在线的音乐播放器的制作,昨晚动手实现了播放音乐的歌词实时对应显示的组件,下面就来看看其中的解析原理. 正文 这里我以李玉刚的<刚好遇见你>为例,首先我们需要获取到音频 ...
- html5实现图片自动旋转,html5实现图片的3D旋转效果
我们先来看一下实现效果: (学习视频分享:html视频教程) H5旋转3D相册,鼠标放置暂停,图片灰度级为0,有放大效果. 该实例运用H5和CSS3动画效果,未用javascript.提高了本人对CS ...
- html5对代码自动排版,HTML5系列:通过JS+DIV+CSS排版布局实现选项卡效果
CSS介绍及布局特点 层叠样式表是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. CSS目前最新版本为CSS3,是能够真正做到网页表现 ...
- html5圆形图片自动旋转,HTML5/Canvas 彩虹小方块圆盘旋转
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 var canvas, ctx, width, height, xCenter, yCenter, squa ...
- HaaS100 云端钉一体智能语音播放器设计
1.方案介绍 本文主要介绍如何基于HaaS100硬件平台搭建"云端钉一体"(阿里云IoT平台 + HaaS100 + 钉钉小程序)的智能语音播放器(以下简称智能语音播放器).该智能 ...
- 怎样查看电脑系统版本_微信7.0.0自动更新后怎样去还原以前的旧版本?
今天"微信自动更新"上热搜了,不少安卓手机用户表示:今天早上打开微信,界面一片白,吓一跳,以为点错了.最后发现原来是自动更新到了7.0.0版本,但是真的,不习惯,还是喜欢以前那个老 ...
- html5 仿微信语音播放器,Material design风格HTML5 audio音频播放器
jAudio.js是一款基于HTML5 audio的Material design风格音频播放器jQuery插件.该音频播放器可以设置音频播放列表,每首曲子的封面,标题等,还可以控制歌曲的播放和快进, ...
- html原生音频播放器倍速,HTML5倍数功能视频播放器(加速2倍,1.5倍播放)
HTML5倍数功能视频播放器(加速2倍,1.5倍播放) 倍数功能视频播放器的应用: 培训场景,教育教学场景下,可以倍速观看视频,比如1.5倍,2倍的速度观看视频,可以更快速的看完课程,节省时间. va ...
最新文章
- windows下python环境搭建_Linux/Windows下Python环境搭建步骤
- Tomcat启动过程源码分析四
- 干货实战|基于Elastic Stack的日志分析系统
- Java 蓝桥杯 字符串对比
- cut\grep\awk\sed命令详解
- Java数据结构之链表的基本操作
- MatConvNet安装问题
- Intellij IDEA 导入 Maven 项目详细配置以及 IDEA部署和使用过程 (Mac版)
- 46泰勒中值定理的常规证明
- 阿里云OSS使用详解(java版本)
- ios10下的通知更新
- android摄氏度转为华氏温度
- 姜小白的Python日记Day15 系统模块详解2 sys模块和os模块
- 全渠道营销与多渠道营销:定义、比较、示例
- 计算机c语言好学吗?要是想自学应该怎么办?
- 平板手写笔有必要买吗?开学季便宜又好用电容笔推荐
- 苹果可穿戴设备项目背后的那些专家
- 如何注册earthdata账号
- mysql数据库 菜鸟_数据库-MySQL入门
- Spring 注解 http://qzone.qq.com/blog/55357655-1232078233