html5微信录音文件,微信H5录音实现
HTML5原生是提供了音频录音的支持的,用到的是这个API--getUserMedia,然而……感人的是,iOS Safari & Safari 直接不支持,面对着庞大的水果系用户,这个方案显然行不通。值得庆幸的是微信的JSSDK提供了音频接口的支持,所以要在微信的H5页面中实现录音等功能,直接使用微信的API即可,兼容性也是妥妥的。下面说说在微信中使用录音接口的具体实现和其中的一些坑。
前提
用过微信JSSDK的童鞋都应该知道,使用它需要先在公众号上绑定安全域名、并且实现权限验证逻辑,具体细节可以参阅官方文档。做好了上述准备工作,在我们的页面中引入SDK的js,并且部署到安全域名下,即可调用API。
接口列表
开始录音接口
wx.startRecord();
停止录音接口
wx.stopRecord({
success: function (res) {
var localId = res.localId;
}
});
监听录音自动停止接口
wx.onVoiceRecordEnd({
// 录音时间超过一分钟没有停止的时候会执行 complete 回调
complete: function (res) {
var localId = res.localId;
}
});
播放语音接口
wx.playVoice({
localId: '' // 需要播放的音频的本地ID,由stopRecord接口获得
});
暂停播放接口
wx.pauseVoice({
localId: '' // 需要暂停的音频的本地ID,由stopRecord接口获得
});
停止播放接口
wx.stopVoice({
localId: '' // 需要停止的音频的本地ID,由stopRecord接口获得
});
监听语音播放完毕接口
wx.onVoicePlayEnd({
success: function (res) {
var localId = res.localId; // 返回音频的本地ID
}
});
上传语音接口
wx.uploadVoice({
localId: '', // 需要上传的音频的本地ID,由stopRecord接口获得
isShowProgressTips: 1, // 默认为1,显示进度提示
success: function (res) {
var serverId = res.serverId; // 返回音频的服务器端ID
}
});
备注:上传语音有效期3天,可用微信多媒体接口下载语音到自己的服务器,此处获得的 serverId 即 media_id,参考文档 https://mp.weixin.qq.com/wiki... 目前多媒体文件下载接口的频率限制为10000次/天,如需要调高频率,请邮件weixin-open@qq.com,邮件主题为【申请多媒体接口调用量】,请对你的项目进行简单描述,附上产品体验链接,并对用户量和使用量进行说明。
下载语音接口
wx.downloadVoice({
serverId: '', // 需要下载的音频的服务器端ID,由uploadVoice接口获得
isShowProgressTips: 1, // 默认为1,显示进度提示
success: function (res) {
var localId = res.localId; // 返回音频的本地ID
}
});
实现长按录音和保存上传录音
长按录音的关键代码:
var btnRecord = $('#record');
btnRecord.on('touchstart', function(event) {
event.preventDefault();
btnRecord.addClass('hold');
startTime = new Date().getTime();
// 延时后录音,避免误操作
recordTimer = setTimeout(function() {
wx.startRecord({
success: function() {
},
cancel: function() {
alert('用户拒绝授权录音');
}
});
}, 300);
}).on('touchend', function(event) {
event.preventDefault();
btnRecord.removeClass('hold');
// 间隔太短
if (new Date().getTime() - startTime < 300) {
startTime = 0;
// 不录音
clearTimeout(recordTimer);
} else { // 松手结束录音
wx.stopRecord({
success: function(res) {
localId = res.localId;
// 上传到服务器
uploadVoice();
},
fail: function(res) {
alert(JSON.stringify(res));
}
});
}
});
上传录音的关键代码:
//上传录音
function uploadVoice(){
//调用微信的上传录音接口把本地录音先上传到微信的服务器
//不过,微信只保留3天,而我们需要长期保存,我们需要把资源从微信服务器下载到自己的服务器
wx.uploadVoice({
localId: voice.localId, // 需要上传的音频的本地ID,由stopRecord接口获得
isShowProgressTips: 1, // 默认为1,显示进度提示
success: function (res) {
//把录音在微信服务器上的id(res.serverId)发送到自己的服务器供下载。
$.ajax({
url: '后端处理上传录音的接口',
type: 'post',
data: JSON.stringify(res),
dataType: "json",
success: function (data) {
alert('文件已经保存到自己的服务器');
},
error: function (xhr, errorType, error) {
console.log(error);
}
});
}
});
}
微信的录音只能通过localId上传到微信服务器,然后通过localId从微信服务器上进行下载,文件只会在服务器上保存3天,格式是arm格式,所以一般还需要通过自己的服务器将文件下载下来保存转码,具体细节查阅文档。
我们在做例如录音贺卡等H5页面时,就需要在自己的服务器下载录音转码成mp3,然后收到贺卡的用户是通过在我们的服务器中获取mp3路径来收听录音的。
小细节处理
阻止默认事件
按钮的touch事件记得加 event.preventDefault();
防止长按文字被选中出现复制框
使用css设置按钮 user-select:none;
避免授权弹窗导致touchend事件无法触发,一直不能结束录音
用户第一次触发录音时,会弹出授权窗口,这时会导致无法触发touchend事件,导致录音一直无法中断。解决的办法是,进入页面时自动触发一次录音弹出授权,之后真正录音时就不需要授权了。 // 用localStorage进行记录,之前没有授权的话,先触发录音授权,避免影响后 续交互
if (!localStorage.allowRecord || localStorage.allowRecord !== 'true') {
wx.startRecord({
success: function() {
localStorage.allowRecord = 'true';
// 仅仅为了授权,所以立刻停掉
wx.stopRecord();
},
cancel: function() {
alert('用户拒绝授权录音');
}
});
}
脑洞
是否能利用录音接口实现类似“八分音符”这种麦克风游戏呢?目前微信的录音api更适合做录音类,像“八分音符”这种需要实时获取当前声音数据的交互还实现不了,因为我们仅仅能获得一个音频的id,不像原生H5接口那样能拿到音频的数据信息。
html5微信录音文件,微信H5录音实现相关推荐
- 如何恢复录音删除的录音文件_电脑录音软件如何定时自动录音
01最近小编有很多朋友都在咨询关于定时录音的问题,我想他们可能也是看中了本人的才华和美貌,所以才来咨询鄙人.所以,我一定不负众望,好好的教大家如何实现这个问题!02据我所知(鄙人才疏学浅),手机上估计 ...
- 如何恢复录音删除的录音文件_苹果手机录音误删怎么恢复?掌握这招,轻松搞定!...
苹果手机录音误删怎么恢复?通过苹果手机的语音备忘录,我们可以进行录音.录制好的内容可以通过语音备忘录直接修剪,不需要该录音还可以直接选择删除.很多人会手滑误删重要的录音,这种情况下我们可以尝试用一些方 ...
- Java批量解析微信dat文件,微信图片
参考地址:https://blog.csdn.net/a627428179/article/details/95485146 以下是java代码,直接可用,不用手动计算异或值 此处的jdk版本需要1. ...
- m4a录音文件损坏修复_m4a录音文件怎么打开 - 卡饭网
yy录音文件找不到怎么办 yy录音找回文件方法 yy录音文件找不到怎么办 yy录音找回文件方法 在YY上录完自己唱的歌,找不到录音文件了,按照下面的步骤,找到录音文件位置其实是很简单的 我的录音文件在 ...
- html5拨打电话自动录音,html5实现手机触摸出现录音以及离开停止录音并上传的功能(代码)...
本篇文章给大家带来的内容是关于html5实现手机触摸出现录音以及离开停止录音并上传的功能(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 以下是实现功能实例: html var ...
- android使用系统录音并寻找系统录音文件
判断系统类 import android.annotation.SuppressLint; import android.os.Build; import android.os.Environment ...
- html调取android手机录音并保存,华为手机怎么导出录音文件并保存至电脑?
在日常生活中有很多需要录音的场景,比如上课时可以录下老师的讲义.开会时可以录下会议过程等等,使用手机就可以很方便进行录音.下面小编就以华为手机为例介绍一下如何录音,以及如何导出录音文件. 一.如何进行 ...
- 录音文件下载_苹果手机录音常见问题解答
iPhone录音的使用越来越多,你在使用iPhone录音时遇到过哪些问题? iPhone录音质量高吗?适用于什么录音场景? iPhone 6s以上型号,都拥有多个麦克风,底部的两个麦克风,其中之一就是 ...
- 录音文件下载_windows剪辑录音最好用的软件
有时在使用音频录制软件,录制歌曲,录制会议内容,录制网络课程时,录下来的内容不全都是有用的,需要的只是录制的其中一部分,这个时候我们需要怎么做呢,如何将其中的一段录音剪切出来,那么剪辑录制的音乐又有哪 ...
最新文章
- 安装 Linux -Mplayer 播放器
- IIS 7 应用程序池自动回收关闭的解决方案
- k8s查看pod的yaml文件_【大强哥-k8s从入门到放弃04】Yaml语法解析
- Amazon Aurora:高吞吐量云原生关系数据库的设计考虑
- P3389-[模板]高斯消元法
- 关于SQL2012里,出现“表中的数据受保护,不能修改”的情况的解决办法
- 超客营销以社交化重塑销售过程管理
- SQL SERVER数据库优化相关资料
- 安装配置管理 之 JRE 安装和配置,以适合JAVA程序运行所具备的环境
- 中国石油大学计算机第二阶段在线作业,中国石油大学计算机应用基础第二阶段在线作业答案2018年...
- 大数据DMP画像系统(转载 简介-龙果学院)
- PPT表格要怎样让设计秒变高级
- python3数学建模基础(三)实现斐波那契数列
- ros nh.parmam 用法
- C++和C#结构体转换的问题
- GATK官方教程 / 概述及工作前的布置
- 设计模式学习之工厂方法模式
- OSChina 娱乐弹弹弹——程序猿如何防火防盗防单身 OR 防败家?
- Buffer的基本用法
- 开源切片工具--TileStache
热门文章
- 【PHPWord】PHPWord生成图表-雷达图 | 隐藏图例、设置数值类别隐藏、展示多组数据
- win10防火墙推荐设置来保护计算机,win10提示windows防火墙没有法更改某些设置如何办?...
- Web前端实践经验总结
- 国外部分音乐人工智能/音乐科技研究机构科研项目简介
- OpenSCAP安装与使用
- 树存储结构的几种表示方法
- AI辅助检测脑动脉瘤,灵敏度达97.5%,华为云联合成果登上国际顶级期刊
- 隐私保护与生成模型: 差分隐私GAN的梯度脱敏方法
- Tungsten Fabric如何实现路由的快速收敛?收敛速度有多快?
- cpu计算机词汇中文意思是,CPU计算机口译词汇中英文对照1