js实现录音上传功能的方法

小编给大家分享一下js实现录音上传功能的方法，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

创新互联建站-专业网站定制、快速模板网站建设、高性价比彭阳网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式彭阳网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖彭阳地区。费用合理售后完善，10余年实体公司更值得信赖。

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

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

1.html页面

 
 





 开始录音


 发送语音指令





 var reco = null;
 var audio_context = new AudioContext();//音频内容对象
 navigator.getUserMedia = (navigator.getUserMedia ||
  navigator.webkitGetUserMedia ||
  navigator.mozGetUserMedia ||
  navigator.msGetUserMedia); // 兼容其他浏览器

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

 function create_stream(user_media) {
  var stream_input = audio_context.createMediaStreamSource(user_media);
  reco = new Recorder(stream_input);
 }


 function start_reco() {
  reco.record();
 }

 function ai_reco() {
  reco.stop();

  reco.exportWAV(function (wav_file) {
   console.log(wav_file);
   var formdata = new FormData(); // form 表单 {key:value}
   formdata.append("audio", wav_file); // form input type="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(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.Recorder = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o
3.flask写法
...
@app.route("/")
def index():
 return render_template("index.html")

@app.route("/receive_audio", methods=["POST"])
def receive_audio():
 file = request.files.get("audio")
 if file:
  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)
  if res.get("err_no") == 200:
   return {"code": 200, "filename": res.get("filename")}

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


@app.route("/get_audio/")
def get_audio(filename):
 return send_file(os.path.join(BAISE_DIR, "data", filename))

...
注意flask启动ip写成127.0.0.1 其他地址 js可能会报错
以上是“js实现录音上传功能的方法”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
            
            
                            

                本文名称：js实现录音上传功能的方法                

                文章路径：http://wjwzjz.com/article/pjphjs.html