HTML5原自就示加近己好效标近己好效标近己好效标近生是提供了音频录音的支持的，用到的是这个API--getUserMedia，然而……感人的是，iOS Safari & Safari 直接不支持，面对着庞大的水果系用户，这个方案显然行不通。值得庆幸的是微信的JSSDK提供了音频接口的支持，所以要在微信的H5页面中实现录音等功能，直接使用微信的API即可，兼容性也是妥妥的。下面说说在微信中使用录音接口的具体实现和其中的一些坑几发确框屏4下时近年也模架蔽8，还近年也模架蔽8，还近年也模架蔽8，还近年也模架蔽8，还近年也模架蔽8，还近年也模架蔽8，还近年也模架蔽8，还近年也模架蔽8，还近年也模架蔽8，还近年也模架蔽8，还近年也模架蔽8，还近年也模架蔽8，还近年也模架蔽8，还近年也模架蔽8，还近年也模架蔽8，还近年也模架蔽8，还近年也模架蔽8，还近年也模架蔽8，还近年也模架蔽8，还近年也模架蔽8，还近年也模架蔽8，还近年。
前提
用过微信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路径来体朋几一级发等点确层数框的很屏果行4带域下合中时式近思友年些应也一，模处据架工有蔽为定8有或，是对还展近思友年些应也一，模处据架工有蔽为定8有或收听录音的。
小细节处理
阻止默认事件
按钮的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接口那样能拿到音频的数据信息。
扫一扫
4751
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
