jquery使用了语音插件,不是自己写的,不造轮子的话,可以康康录音的原理也还行。 链接
语音插件演示项目 链接
js audio recorder plugin 使用文档 链接
jquery中引用setTimeout时的注意事项 链接1
js中的file对象详解 链接2
js中的blob对象详解 链接3
blob转file对象 链接
jquery中使用formdata表单传输数据详解 链接4 链接5
filestorage对象转为file对象(二进制) 链接
flask中全局request常用属性 链接
附上看到的代码完整的文章 链接
# filestorage对象可以通过 object.read()函数读取其中存储的二进制内容。(文件上传本质上是上传文件的二进制数据),所以可以直接用于post请求的files中。
file = request.files['file'].read()
res = requests.post(url=url, data=params, files={'file': file})
$('#record-button').on('click', function (e) { //点击按钮开始录音
let recorder = new Recorder({ // 新建recorder对象
sampleBits: 16, // 采样位数,支持 8 或 16,默认是16
sampleRate: 16000, // 采样率,支持 11025、16000、22050、24000、44100、48000
numChannels: 1, // 声道,支持 1 或 2, 默认是1
});
recorder.start().then(() => { // 开始录音
}, (error) => { // 出错后的处理方式
console.log(`${error.name} : ${error.message}`);
});
$(function(){setTimeout(get_wav,4000);}) // 此处演示激活录音函数,写死录音时间。(代码此写法有待更改) 4000ms = 4s
//jquery中引用setTimeout时的注意事项---->链接(1)
function get_wav(){
let wav_blob = recorder.getWAVBlob(); //获取wav类型的blob数据。 blob类型详解--->链接(2)
// let file = new File([wav_blob], wav_blob.name, {'type':wav_blob.type}); 此处将blob类型转为file类型(可选) file类型详解----> 链接(3)
let formData = new FormData(); //ajax向后台传输文件时需要使用formData formData使用详解------> 链接(4) 链接(5)
formData.append('wav_file', wav_blob);
$.ajax({
type: 'POST',
url: '/your_url',
data: formData,
cache: false,
contentType: false,
processData: false,
success: function (data) {
if (data.msg == 'success'){
$('.text-box').val(data.content) //在文本框内填充返回的文本(此处后期修改对象)
// 销毁录音实例,置为null释放资源,fn为回调函数,
recorder.destroy().then(function() {
recorder = null;
});
}
else {
console.log(data.msg)
// 销毁录音实例,置为null释放资源,fn为回调函数,
recorder.destroy().then(function() {
recorder = null;
});
}
},
})
}
})
从ajax提交到flask后台的formdata对象中。
如果是这样的字符串,保存到后台的对象是一个CombinedMultiDict类型
需要从flask的全局 request.value.get(‘type’) 中获取。
formData.append("type", "upload_file")
后端Flask 获取文件数据流并发送post请求
if request.values.get('type') == 'upload_file':
file = request.files['upload_file'].read()
#files中放置的是文件二进制流
res = requests.post(url=url, data=params, files={'file': file})