官方文档必须首当其冲
首先H5录音功能的话 对于普通H5网上是有很多的方法 插件 但是兼容性很差 特别是对于ios 一开始想的是用H5 做个通用的 但是一圈下来 发现兼容性就很难受
好在项目是基于微信公众号 放弃使用普通H5的想法 转战使用微信提供的 JSAPI 录音功能 一下子解决了兼容的问题 微信已经帮忙处理完毕
接下来说一下 注意事项
在使用微信提供的录音功能前
1.首先的是进入微信公众号后台 公众号设置的功能设置 里填写“JS接口安全域名” 一定要记得
2.先引入微信JS 简单的
http://res.wx.qq.com/open/js/jweixin-1.6.0.js">（https://res.wx.qq.com/open/js/jweixin-1.6.0.js）
3.注册微信配置 使用wx.config() 将要使用的api 填写到jsApiList里面 要记得
注意：签名问题 一是服务端算法问题 二是前端当前地址和请求的地址不同 也会出现签名错误 关于签名问题 其他文章也有说明产生的原因
录音功能 不是立即使用 所以 只需检测是否配置环境成功即可 wx.ready()..等回调方法
.js 配置注册微信环境代码示例
export async function wechatSharefund (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 = this
wx.startRecord({
success: function(e){
// 开始录音的代码处理
},
cancel: function (e) {
console.log(e)
}
})
},
touchend () {
console.log('结束录音')
if (this.localId) {
return
}
let that = this
clearInterval(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);
// }
// });
}
});
}
网友评论