h5打开麦克风权限录音_微信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接口那样能拿到音频的数据信息。
h5打开麦克风权限录音_微信H5录音实现相关推荐
- h5打开麦克风权限录音_网页录音时的麦克风权限问题解决
在我们进行网页制作时可能会遇到需要录音的情况,而在进行网页录音时又有可能会遇到麦克风权限问题导致无法录音,本文就来为大家介绍一下如何解决麦克风权限问题. 在本地中打开的时候,谷歌.火狐.opera.E ...
- h5打开麦克风权限录音_原来电脑上自带录音功能,很多人还不知道,真的太实用了...
众所周知,我们的手机上一般都会带有录音功能,那么如果你使用的是电脑,想要在电脑上录音该怎么办呢?下面就来教你两种方法. 一.系统自带录音 1.这里就以Win10系统为例,首先按下组合键[Win+S], ...
- h5打开麦克风权限录音_h5打开麦克风权限录音_通过H5实现html页面的录音和播放 (Recorder用于html5录音)......
varrec;/**调用open打开录音请求好录音权限**/ var recOpen=function(success){//一般在显示出录音按钮或相关的录音界面时进行此方法调用,后面用户点击开始录音 ...
- h5打开麦克风权限录音_h5打开麦克风权限录音_原来电脑上自带录音功能,很多人还不知道,真的太实用了......
众所周知,我们的手机上一般都会带有录音功能,那么如果你使用的是电脑,想要在电脑上录音该怎么办呢?下面就来教你两种方法. 一.系统自带录音 1.这里就以Win10系统为例,首先按下组合键[Win+S], ...
- h5打开麦克风权限录音_通过H5实现html页面的录音和播放 (Recorder用于html5录音)...
varrec;/**调用open打开录音请求好录音权限**/ var recOpen=function(success){//一般在显示出录音按钮或相关的录音界面时进行此方法调用,后面用户点击开始录音 ...
- h5打开麦克风权限录音_手机使用应用时总是需要获取权限,这3个权限不能随意给,望周知...
我们在使用手机应用时,总是会收到此应用需要某些权限的弹窗提示,大部分所选择的选项都是全部允许,但是我们这番操作真的正确吗? 当我们允许手机应用获取这些权限后,就说明此应用能够通过我们的手机获取我们手机 ...
- h5打开麦克风权限录音_MAC录屏没有声音?如何在苹果电脑MACBOOK上录音录屏
文章目录 1 MAC录屏没有声音? 如何在苹果电脑Macbook上录音录屏 2 Mac录屏软件 3 Mac录制系统声音 3.1 1- 下载SoundFlower插件 3.2 2- 安装插件 3.3 3 ...
- Android WebView加载h5打开麦克风与摄像头的权限问题
目录 快速处理 app向系统申请录音与相机权限 h5向app申请录音和相机权限 详细解答 app权限与h5权限 录音与麦克风 默许的风险 最佳实践 Android webview h5 麦克风权限,摄 ...
- html5微信录音文件,微信H5录音实现
HTML5原生是提供了音频录音的支持的,用到的是这个API--getUserMedia,然而--感人的是,iOS Safari & Safari 直接不支持,面对着庞大的水果系用户,这个方案显 ...
最新文章
- Java基础(七)--Exception异常处理
- sqli-labs:5-6,盲注
- 容器(一)剖析面试最常见问题之 Java 集合框架
- 在android C/C++ native编程(ndk)中使用logcat
- stdthread(2)创建
- pages文件服务器地址,Pages怎么设置目录 Pages如何设置目录
- 分块-洛谷P3203 [HNOI2010]BOUNCE 弹飞绵羊
- html页面循环报错,wxs 脚本中 for 循环的一种写法导致 page-frame.html 报错
- Pytest之重运行及生成测试报告
- python跳出两层(多层)循环--使用标志量
- python爬虫qq音乐_Python爬虫-QQ音乐无损音乐地址解析
- 数学竞赛辅导陈启浩pdf_高中数学一题多解经典题型汇编(一)
- 计算机网络分层协议及各层功能
- matlab 判断 正态分布,Matlab实现正态分布
- 33.iptables备份与恢复 firewalld的9个zone以及操作 service的操作
- 清理掉大流氓:2345
- 加州理工学院计算机研究生申请条件,加州理工学院研究生申请条件
- 微信公众号第三方登录,简单易懂
- 如何看待小米发布的Redmi Note9系列手机?1299元起是否值得?
- CnnDroid 优化加速原理
热门文章
- PyTorch RuntimeError: Function ‘CudnnBatchNormBackward0‘ returned nan values in its 0th output. 解决方法
- 【java学习笔记day01】运行第一个程序Helloworld!
- 研究生毕业论文如何选题
- 职场常用问题分析与管理方法
- 面料软件_面料管理系统_面料订单管理
- 电机集电环是如何更换与运行的
- TARS 斩获 2018 年最佳原创开源软件奖
- iPhone备忘录删了怎么恢复?恢复备忘录的两大方法!
- 【MapReduce】数据去重、多表查询、倒排索引、单元测试等案例编程
- 第十一届蓝桥杯大赛软件类B组省赛题目(2020蓝桥杯)