摘要:值得庆幸的是微信的提供了音频接口的支持,所以要在微信的页面中实现录音等功能,直接使用微信的即可,兼容性也是妥妥的。下面说说在微信中使用录音接口的具体实现和其中的一些坑。
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接口那样能拿到音频的数据信息。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/56071.html
摘要:开源库随着支持功能的增多,音频转码处理效率渐渐的跟不上需求了,近期抽时间对音频转码部分进行了升级优化,以支持更多实用的功能。基于以上两点问题,似乎只有多线程能够解决。 Recorder H5 GitHub开源库随着支持功能的增多,音频转码处理效率渐渐的跟不上需求了,近期抽时间对音频转码部分进行了升级优化,以支持更多实用的功能。另外IOS的Hybrid App也完成了移植,Android...
摘要:直接调用微信小程序录音接口,然后上传到服务器,百度语音接口是识别不了这种格式的文件,那么问题来了如何转码如何在中使用本文将要解决这两个问题。程序俱乐部是一个专注微信小程序学习交流,相关外包招聘需求信息发布的微信公众号。 直接调用微信小程序录音接口,然后上传到服务器,百度语音接口是识别不了这种格式的文件,那么问题来了 如何转码? ffmpeg? 如何在PHP中使用? 本文将要解决这两...
摘要:表示,可以捕获到系统默认的设备,比如照相机摄像机录音。调用手机的录像功能和直接打开系统文件目录。苹果手机调出来的是拍照和录像安卓手机调出来的录音功能标签还支持一个属性,表示可以支持多选就没啥用了,因为是专门用来支持多选的。
项目需求简单描述 用户长按录音,松手后直接结束录音,结束录音后,用户可以选择重新录音、播放刚才的录音,上传录音(这里的上传录音指上传到自己服务器,上传步骤是,前端调用wx.uploadVoice,后台再到微信服务器下载音频文件,上传到自己的服务器)。注意,音频文件自上传时间算起在微信服务器的有效期为3天。由于后台从微信服务器下载的音频文件是amr格式的,需要后台先把amr文件转换成MP3,前端用a...
摘要:在移动端页面使用上传文件或者图片时,和安卓的展现方式有很多不一样。 在移动端页面使用上传文件或者图片时,IOS和安卓的展现方式有很多不一样。 input 有 captrure属性,取值:camera:相机;camcorder:摄像;microphone:录音 在安卓想要调用相机需要添加capture属性,于是我在IOS和Android上进行了三端测试! 结果如下: 1. 安卓: 【...
阅读 2899·2021-11-23 09:51
阅读 2251·2021-11-22 09:34
阅读 2800·2021-10-25 09:43
阅读 1770·2021-10-11 10:59
阅读 2980·2021-09-22 15:13
阅读 2126·2021-09-04 16:40
阅读 295·2019-08-30 15:53
阅读 3087·2019-08-30 11:13