官方文档必须首当其冲
首先H5录音功能的话 对于普通H5网上是有很多的方法 插件 但是兼容性很差 特别是对于ios 一开始想的是用H5 做个通用的 但是一圈下来 发现兼容性就很难受
好在项目是基于微信公众号 放弃使用普通H5的想法 转战使用微信提供的 JSAPI 录音功能 一下子解决了兼容的问题 微信已经帮忙处理完毕
接下来说一下 注意事项
在使用微信提供的录音功能前
1.首先的是进入微信公众号后台 公众号设置的功能设置 里填写“JS接口安全域名” 一定要记得
2.先引入微信JS 简单的
//(https://res.wx.qq.com/open/js/jweixin-1.6.0.js)
3.注册微信配置 使用wx.config() 将要使用的api 填写到jsApiList里面 要记得
注意：签名问题 一是服务端算法问题 二是前端当前地址和请求的地址不同 也会出现签名错误 关于签名问题 其他文章也有说明产生的原因
录音功能 不是立即使用 所以 只需检测是否配置环境成功即可 wx.ready()..等回调方法
.js 配置注册微信环境代码示例
export async functionwechatSharefund (columnInfo) {
const data= await wechatConfig(location.href.split('#')[0]) //返回的微信信息
console.log(data)if (data.code === 0) {//注册
wx.config({
debug:false, //开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: data.data.appId, //必填，公众号的唯一标识
timestamp: data.data.timestamp, //必填，生成签名的时间戳
nonceStr: data.data.nonceStr, //必填，生成签名的随机串
signature: data.data.signature, //必填，签名
jsApiList: ['updateAppMessageShareData','updateTimelineShareData','startRecord','stopRecord','playVoice','onVoiceRecordEnd','uploadVoice','onVoicePlayEnd','downloadVoice']//必填，需要使用的JS接口列表
})//是否成功
wx.ready(function(res) {
console.log([res,90])
wx.updateAppMessageShareData({title:'我是自定义首页！！！！！好友' +store.getters.doctorId,
desc:'自定义描述', //分享描述
link: 'https://doctor.taiori.com/doctor/hospitalIndex?userParam=' +store.getters.doctorId,
imgUrl:'', //分享图标
success: function() {//设置成功
}
})
wx.updateTimelineShareData({
title:"我是自定义首页！！圈" +store.getters.doctorId,
link:'https://doctor.taiori.com/doctor/hospitalIndex?userParam=' +store.getters.doctorId,
imgUrl:'',
success:function() {
}
});
});//是否支持指定JS接口
wx.checkJsApi({
jsApiList: ['startRecord'], //需要检测的JS接口列表，所有JS接口列表见附录2,
success: function(res) {
console.log([res,'114'])
store.commit('jsApiList', res)//以键值对的形式返回，可用的api值true，不可用为false
//如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
}
})
wx.error(function(res){
console.log(res)
})
}在使用的地方 引入.j文件
import { wechatSharefund } from '.js'mounted () {
wechatSharefund()
}使用简单的
touchstart () {
console.log('开始录音')if (this.localId) {return}
let that= thiswx.startRecord({
success:function(e){//开始录音的代码处理
},
cancel:function(e) {
console.log(e)
}
})
},
touchend () {
console.log('结束录音')if (this.localId) {return}
let that= thisclearInterval(this.timer)
wx.stopRecord({
success:function(res) {//结束后的代码处理
}
})
}最后 会涉及到 保存录音 及 上传到自己服务器动作 简单的 使用相对于的API
微信临时素材返回的是speex文件 需要解码成想要的播放MAP3或者wav 前端可直接播放的链接 解码微信有提供方法
uploadVoice() {
let that= this
//上传到微信为临时素材
wx.uploadVoice({
localId:this.localId, //需要上传的音频的本地ID，由stopRecord接口获得
isShowProgressTips: 1, //默认为1，显示进度提示
success: function(res) {//获得微信服务端音频ID
var serverId = res.serverId; //返回音频的服务器端ID
console.log(res)//服务端提供接口 传递 音频ID 由服务端处理从微信服务端下载临时素材 存为自己的服务器链接
//http请求方式: GET,https调用 https://api.weixin.qq.com/cgi-bin/media/get?access_token=ACCESS_TOKEN&media_id=MEDIA_ID 请求示例(示例为通过curl命令获取多媒体文件)
//curl -I -G "https://api.weixin.qq.com/cgi-bin/media/get?access_token=ACCESS_TOKEN&media_id=MEDIA_ID"
//$.ajax({
//url: 'https://api.weixin.qq.com/cgi-bin/media/get?access_token=ACCESS_TOKEN&media_id=MEDIA_ID', // 服务端提供的接口链接
//type: 'GET',
//dataType: "json",
//success: function (data) {
//alert('文件已经保存到自己的服务器');
//},
//error: function (xhr, errorType, error) {
//console.log(error);
//}
//});
}
});
}
