h5调用调用手机麦克风实现科大讯飞语音转写服务
做一个H5页面,在微信端打开,调取手机麦克风进行录音,因为一些原因不打算用微信的JSSDK提供的音频接口,录音调用以及录音上传调用了Recorder,这里给出github链接 https://github.com/xiangyuecn/Recorder。 试了好几个录音调用的工具包,这个是唯一能用的。要注意的一点是,录音调用必须要用https请求,不然没有办法请求到麦克风权限。
1)安装
通过 npm/cnpm 进行安装 npm install recorder-core
2)代码
import Recorder from 'recorder-core'
import 'recorder-core/src/engine/wav'
import 'recorder-core/src/engine/mp3-engine'
//由于大部分情况下ios-weixin的支持需要用到amr解码器,应当把amr引擎也加载进来
import 'recorder-core/src/engine/beta-amr'
import 'recorder-core/src/engine/beta-amr-engine'
data() {
rec: Recorder({
type:"wav",sampleRate:16000,bitRate:16
,onProcess:function(buffers,powerLevel,bufferDuration,bufferSampleRate){}
})
},
mounted() {
var recOpen=function(){//一般在显示出录音按钮或相关的录音界面时进行此方法调用,后面用户点击开始录音时就能畅通无阻了
that.rec.open(function(){
console.log("已打开录音,可以点击开始了");
//rec.start() 此处可以立即开始录音,但不建议这样编写,因为open是一个延迟漫长的操作,通过两次用户操作来分别调用open和start是推荐的最佳流程
},function(msg,isUserNotAllow){//用户拒绝未授权或不支持
// clearTimeout(t);
console.log((isUserNotAllow?"UserNotAllow,":"")+"无法录音:"+msg, 1);
});
};
recOpen();
},
methods: {
/**开始录音**/
recStart(){//打开了录音后才能进行start、stop调用
this.rec.start();
},
/**结束录音**/
recStop(){
this.rec.stop((blob,duration) => {
// var voiceToTextRes = ""
this.showRecordingBox = false
console.log(blob,(window.URL||webkitURL).createObjectURL(blob),"时长:"+duration+"ms");
// this.rec.close();//释放录音资源,当然可以不释放,后面可以连续调用start;但不释放时系统或浏览器会一直提示在录音,最佳操作是录完就close掉
// this.rec=null;
//已经拿到blob文件对象想干嘛就干嘛:立即播放、上传
/*** 【立即播放例子】 ***/
// var audio=document.createElement("audio");
// audio.controls=true;
// document.body.appendChild(audio);
// //简单利用URL生成播放地址,注意不用了时需要revokeObjectURL,否则霸占内存
// audio.src=(window.URL||webkitURL).createObjectURL(blob);
// audio.play();
var reader=new FileReader();
reader.onloadend=()=>{
var voiceRes = reader.result;
var VoiceData = voiceRes.substring(voiceRes.indexOf(",") + 1);
console.log(VoiceData)
var s = { "engine_type": "sms-5s16k", "aue": "raw" };
var x_appid = "*******";
var x_param = base64.encode(JSON.stringify(s))
var x_header = { "Content-Type": "application/x-www-form-urlencoded; charset=utf-8" ,"X-Appid": x_appid, "X-Param": x_param };
// console.log("x_param====", base64);
axios.post(
"/vioceToText/", //这里调用科大讯飞语音转写服务
querystring.stringify({
audio: "/vioceToText/"
}),
{
headers: x_header
}
).then(res => {
this.getAnswers(res.data.data)
})
.catch(err => {
console.log(err);
});
};
reader.readAsDataURL(blob);
},function(msg){
console.log("录音失败:"+msg);
// this.rec.close();//可以通过stop方法的第3个参数来自动调用close
// this.rec=null;
});
},
}
3)Nginx配置解决跨域的问题
location /vioceToText/ {
proxy_pass https://xx.xx.xxx.xx/; 科大讯飞语音转写服务url
}
4)兼容性问题
经过测试,说一下兼容性问题,兼容性问题主要在于mediaDevices.getUserMedia()方法,
1.ios手机:
在http环境下,在微信端打开,不弹任何东西;
在https环境下,在微信端打开,不弹任何东西
在http环境下,在safari中打开,走catch方法,分别弹(NotAllowedError)(The request is not allowed by the user agent or the plateform in the current context,possibly because the user denied permission);
在https环境下,在safari中打开,直接弹是否想要访问麦克风,说明调起麦克风成功
2.安卓手机(Android X5内核):
在http环境下,在微信端打开,走catch方法,分别弹(NotSupportedError)(only secure origins are allowed(see: https://goo.gl/YOZkNV));
在https环境下,在微信端打开,直接弹是否想要访问麦克风,说明调起麦克风成功
在http环境下,在google中打开,走catch方法,分别弹(PermissionDeniedError)();
在https环境下,在goole中打开,直接弹是否想要访问麦克风,说明调起麦克风成功