js实现录音上传功能

2023-08-08 09:53:04 79

本文实例为大家分享了js代码实现录音上传，供大家参考，具体内容如下

1.html页面
2.Recorder.js内容
3.flask写法

1.html页面











开始录音


发送语音指令





varreco=null;
varaudio_context=newAudioContext();//音频内容对象
navigator.getUserMedia=(navigator.getUserMedia||
navigator.webkitGetUserMedia||
navigator.mozGetUserMedia||
navigator.msGetUserMedia);//兼容其他浏览器

navigator.getUserMedia({audio:true},create_stream,function(err){
console.log(err)
});

functioncreate_stream(user_media){
varstream_input=audio_context.createMediaStreamSource(user_media);
reco=newRecorder(stream_input);
}


functionstart_reco(){
reco.record();
}

functionai_reco(){
reco.stop();

reco.exportWAV(function(wav_file){
console.log(wav_file);
varformdata=newFormData();//form表单{key:value}
formdata.append("audio",wav_file);//forminputtype="file"
$.ajax({
url:"/receive_audio",
type:'post',
processData:false,
contentType:false,
data:formdata,
dataType:'json',
success:function(data){
console.log(data);
document.getElementById("player").src="/get_audio/"+data.filename;
}
})
});
reco.clear();
}

2.Recorder.js内容

直接复制保存即可

(function(f){if(typeofexports==="object"&&typeofmodule!=="undefined"){module.exports=f()}elseif(typeofdefine==="function"&&define.amd){define([],f)}else{varg;if(typeofwindow!=="undefined"){g=window}elseif(typeofglobal!=="undefined"){g=global}elseif(typeofself!=="undefined"){g=self}else{g=this}g.Recorder=f()}})(function(){vardefine,module,exports;return(functione(t,n,r){functions(o,u){if(!n[o]){if(!t[o]){vara=typeofrequire=="function"&&require;if(!u&&a)returna(o,!0);if(i)returni(o,!0);varf=newError("Cannotfindmodule'"+o+"'");throwf.code="MODULE_NOT_FOUND",f}varl=n[o]={exports:{}};t[o][0].call(l.exports,function(e){varn=t[o][1][e];returns(n?n:e)},l,l.exports,e,t,n,r)}returnn[o].exports}vari=typeofrequire=="function"&&require;for(varo=0;o
3.flask写法
...
@app.route("/")
defindex():
returnrender_template("index.html")

@app.route("/receive_audio",methods=["POST"])
defreceive_audio():
file=request.files.get("audio")
iffile:
filepath=os.path.join(BAISE_DIR,"data","%s.m4a"%uuid4())
file.save(filepath)

text=baidu.auido2text(filepath)

answer=tuling.chat(text)

res=baidu.text2audio(answer)
ifres.get("err_no")==200:
return{"code":200,"filename":res.get("filename")}

return{"code":201,"msg":"上传失败"}


@app.route("/get_audio/")
defget_audio(filename):
returnsend_file(os.path.join(BAISE_DIR,"data",filename))

...
注意flask启动ip写成127.0.0.1其他地址js可能会报错
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

js实现录音上传功能

热门推荐

随机推荐