网站建设资讯

NEWS

网站建设资讯

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://njwzjz.com/article/pjphjs.html