js实现录音上传功能


Posted in Javascript onNovember 22, 2019

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

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

1.html页面

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title id="title"></title>

</head>
<body>
<audio id="player" autoplay controls></audio>
<p>
 <button onclick="start_reco()">开始录音</button>
</p>
<p>
 <button onclick="ai_reco()" style="background-color: cornflowerblue">发送语音指令</button>
</p>
</body>
<script type="application/javascript" src="/static/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="/static/Recorder.js"></script>
<script type="application/javascript">
 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();
 }

</script>
</html>

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<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
"use strict";

module.exports = require("./recorder").Recorder;

},{"./recorder":2}],2:[function(require,module,exports){
'use strict';

var _createClass = (function () {
 function defineProperties(target, props) {
  for (var i = 0; i < props.length; i++) {
   var descriptor = props[i];descriptor.enumerable = descriptor.enumerable || false;descriptor.configurable = true;if ("value" in descriptor) descriptor.writable = true;Object.defineProperty(target, descriptor.key, descriptor);
  }
 }return function (Constructor, protoProps, staticProps) {
  if (protoProps) defineProperties(Constructor.prototype, protoProps);if (staticProps) defineProperties(Constructor, staticProps);return Constructor;
 };
})();

Object.defineProperty(exports, "__esModule", {
 value: true
});
exports.Recorder = undefined;

var _inlineWorker = require('inline-worker');

var _inlineWorker2 = _interopRequireDefault(_inlineWorker);

function _interopRequireDefault(obj) {
 return obj && obj.__esModule ? obj : { default: obj };
}

function _classCallCheck(instance, Constructor) {
 if (!(instance instanceof Constructor)) {
  throw new TypeError("Cannot call a class as a function");
 }
}

var Recorder = exports.Recorder = (function () {
 function Recorder(source, cfg) {
  var _this = this;

  _classCallCheck(this, Recorder);

  this.config = {
   bufferLen: 4096,
   numChannels: 2,
   mimeType: 'audio_pcm/wav'
  };
  this.recording = false;
  this.callbacks = {
   getBuffer: [],
   exportWAV: []
  };

  Object.assign(this.config, cfg);
  this.context = source.context;
  this.node = (this.context.createScriptProcessor || this.context.createJavaScriptNode).call(this.context, this.config.bufferLen, this.config.numChannels, this.config.numChannels);

  this.node.onaudioprocess = function (e) {
   if (!_this.recording) return;

   var buffer = [];
   for (var channel = 0; channel < _this.config.numChannels; channel++) {
    buffer.push(e.inputBuffer.getChannelData(channel));
   }
   _this.worker.postMessage({
    command: 'record',
    buffer: buffer
   });
  };

  source.connect(this.node);
  this.node.connect(this.context.destination); //this should not be necessary

  var self = {};
  this.worker = new _inlineWorker2.default(function () {
   var recLength = 0,
    recBuffers = [],
    sampleRate = undefined,
    numChannels = undefined;

   self.onmessage = function (e) {
    switch (e.data.command) {
     case 'init':
      init(e.data.config);
      break;
     case 'record':
      record(e.data.buffer);
      break;
     case 'exportWAV':
      exportWAV(e.data.type);
      break;
     case 'getBuffer':
      getBuffer();
      break;
     case 'clear':
      clear();
      break;
    }
   };

   function init(config) {
    sampleRate = config.sampleRate;
    numChannels = config.numChannels;
    initBuffers();
   }

   function record(inputBuffer) {
    for (var channel = 0; channel < numChannels; channel++) {
     recBuffers[channel].push(inputBuffer[channel]);
    }
    recLength += inputBuffer[0].length;
   }

   function exportWAV(type) {
    var buffers = [];
    for (var channel = 0; channel < numChannels; channel++) {
     buffers.push(mergeBuffers(recBuffers[channel], recLength));
    }
    var interleaved = undefined;
    if (numChannels === 2) {
     interleaved = interleave(buffers[0], buffers[1]);
    } else {
     interleaved = buffers[0];
    }
    var dataview = encodeWAV(interleaved);
    var audioBlob = new Blob([dataview], { type: type });

    self.postMessage({ command: 'exportWAV', data: audioBlob });
   }

   function getBuffer() {
    var buffers = [];
    for (var channel = 0; channel < numChannels; channel++) {
     buffers.push(mergeBuffers(recBuffers[channel], recLength));
    }
    self.postMessage({ command: 'getBuffer', data: buffers });
   }

   function clear() {
    recLength = 0;
    recBuffers = [];
    initBuffers();
   }

   function initBuffers() {
    for (var channel = 0; channel < numChannels; channel++) {
     recBuffers[channel] = [];
    }
   }

   function mergeBuffers(recBuffers, recLength) {
    var result = new Float32Array(recLength);
    var offset = 0;
    for (var i = 0; i < recBuffers.length; i++) {
     result.set(recBuffers[i], offset);
     offset += recBuffers[i].length;
    }
    return result;
   }

   function interleave(inputL, inputR) {
    var length = inputL.length + inputR.length;
    var result = new Float32Array(length);

    var index = 0,
     inputIndex = 0;

    while (index < length) {
     result[index++] = inputL[inputIndex];
     result[index++] = inputR[inputIndex];
     inputIndex++;
    }
    return result;
   }

   function floatTo16BitPCM(output, offset, input) {
    for (var i = 0; i < input.length; i++, offset += 2) {
     var s = Math.max(-1, Math.min(1, input[i]));
     output.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7FFF, true);
    }
   }

   function writeString(view, offset, string) {
    for (var i = 0; i < string.length; i++) {
     view.setUint8(offset + i, string.charCodeAt(i));
    }
   }

   function encodeWAV(samples) {
    var buffer = new ArrayBuffer(44 + samples.length * 2);
    var view = new DataView(buffer);

    /* RIFF identifier */
    writeString(view, 0, 'RIFF');
    /* RIFF chunk length */
    view.setUint32(4, 36 + samples.length * 2, true);
    /* RIFF type */
    writeString(view, 8, 'WAVE');
    /* format chunk identifier */
    writeString(view, 12, 'fmt ');
    /* format chunk length */
    view.setUint32(16, 16, true);
    /* sample format (raw) */
    view.setUint16(20, 1, true);
    /* channel count */
    view.setUint16(22, numChannels, true);
    /* sample rate */
    view.setUint32(24, sampleRate, true);
    /* byte rate (sample rate * block align) */
    view.setUint32(28, sampleRate * 4, true);
    /* block align (channel count * bytes per sample) */
    view.setUint16(32, numChannels * 2, true);
    /* bits per sample */
    view.setUint16(34, 16, true);
    /* data chunk identifier */
    writeString(view, 36, 'data');
    /* data chunk length */
    view.setUint32(40, samples.length * 2, true);

    floatTo16BitPCM(view, 44, samples);

    return view;
   }
  }, self);

  this.worker.postMessage({
   command: 'init',
   config: {
    sampleRate: this.context.sampleRate,
    numChannels: this.config.numChannels
   }
  });

  this.worker.onmessage = function (e) {
   var cb = _this.callbacks[e.data.command].pop();
   if (typeof cb == 'function') {
    cb(e.data.data);
   }
  };
 }

 _createClass(Recorder, [{
  key: 'record',
  value: function record() {
   this.recording = true;
  }
 }, {
  key: 'stop',
  value: function stop() {
   this.recording = false;
  }
 }, {
  key: 'clear',
  value: function clear() {
   this.worker.postMessage({ command: 'clear' });
  }
 }, {
  key: 'getBuffer',
  value: function getBuffer(cb) {
   cb = cb || this.config.callback;
   if (!cb) throw new Error('Callback not set');

   this.callbacks.getBuffer.push(cb);

   this.worker.postMessage({ command: 'getBuffer' });
  }
 }, {
  key: 'exportWAV',
  value: function exportWAV(cb, mimeType) {
   mimeType = mimeType || this.config.mimeType;
   cb = cb || this.config.callback;
   if (!cb) throw new Error('Callback not set');

   this.callbacks.exportWAV.push(cb);

   this.worker.postMessage({
    command: 'exportWAV',
    type: mimeType
   });
  }
 }], [{
  key: 'forceDownload',
  value: function forceDownload(blob, filename) {
   var url = (window.URL || window.webkitURL).createObjectURL(blob);
   var link = window.document.createElement('a');
   link.href = url;
   link.download = filename || 'output.wav';
   var click = document.createEvent("Event");
   click.initEvent("click", true, true);
   link.dispatchEvent(click);
  }
 }]);

 return Recorder;
})();

exports.default = Recorder;

},{"inline-worker":3}],3:[function(require,module,exports){
"use strict";

module.exports = require("./inline-worker");
},{"./inline-worker":4}],4:[function(require,module,exports){
(function (global){
"use strict";

var _createClass = (function () { function defineProperties(target, props) { for (var key in props) { var prop = props[key]; prop.configurable = true; if (prop.value) prop.writable = true; } Object.defineProperties(target, props); } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();

var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } };

var WORKER_ENABLED = !!(global === global.window && global.URL && global.Blob && global.Worker);

var InlineWorker = (function () {
 function InlineWorker(func, self) {
 var _this = this;

 _classCallCheck(this, InlineWorker);

 if (WORKER_ENABLED) {
  var functionBody = func.toString().trim().match(/^function\s*\w*\s*\([\w\s,]*\)\s*{([\w\W]*?)}$/)[1];
  var url = global.URL.createObjectURL(new global.Blob([functionBody], { type: "text/javascript" }));

  return new global.Worker(url);
 }

 this.self = self;
 this.self.postMessage = function (data) {
  setTimeout(function () {
  _this.onmessage({ data: data });
  }, 0);
 };

 setTimeout(function () {
  func.call(self);
 }, 0);
 }

 _createClass(InlineWorker, {
 postMessage: {
  value: function postMessage(data) {
  var _this = this;

  setTimeout(function () {
   _this.self.onmessage({ data: data });
  }, 0);
  }
 }
 });

 return InlineWorker;
})();

module.exports = InlineWorker;
}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
},{}]},{},[1])(1)
});

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/<filename>")
def get_audio(filename):
 return send_file(os.path.join(BAISE_DIR, "data", filename))

...

注意flask启动ip写成127.0.0.1 其他地址 js可能会报错

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
将input file的选择的文件清空的两种解决方案
Oct 21 Javascript
js定时调用方法成功后并停止调用示例
Apr 08 Javascript
纯Javascript实现ping功能的方法
Mar 20 Javascript
JS实现网页Div层Clone拖拽效果
Sep 26 Javascript
如何在Linux上安装Node.js
Apr 01 Javascript
AngularGauge 属性解析详解
Sep 06 Javascript
JS 在数组指定位置插入/删除数据的方法
Jan 12 Javascript
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
Feb 14 Javascript
js实现悬浮窗效果(支持拖动)
Mar 09 Javascript
jQuery创建及操作xml格式数据示例
May 26 jQuery
vue2实现搜索结果中的搜索关键字高亮的代码
Aug 29 Javascript
Vue动态组件和异步组件原理详解
May 06 Javascript
解决vue自定义全局消息框组件问题
Nov 22 #Javascript
JavaScript实现省市联动效果
Nov 22 #Javascript
Vue混入mixins滚动触底的方法
Nov 22 #Javascript
超简单的微信小程序轮播图
Nov 22 #Javascript
微信小程序实现Swiper轮播图效果
Nov 22 #Javascript
Js代码中的span拼接问题解决
Nov 22 #Javascript
微信小程序商品详情页底部弹出框
Nov 22 #Javascript
You might like
如何获得PHP相关资料
2006/10/09 PHP
用PHP和ACCESS写聊天室(六)
2006/10/09 PHP
Javascript 代码也可以变得优美的实现方法
2009/06/22 Javascript
javascript getElementsByClassName函数
2010/04/01 Javascript
用于节点操作的API,颠覆原生操作HTML DOM节点的API
2010/12/11 Javascript
javascript:void(0)的作用示例介绍
2013/10/28 Javascript
jquery live()重复绑定的解决方法介绍
2014/01/03 Javascript
js操作iframe父子窗体示例
2014/05/22 Javascript
JavaScript之数组(Array)详解
2015/04/01 Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
2016/08/18 Javascript
vue-router路由参数刷新消失的问题解决方法
2017/06/17 Javascript
iscroll实现下拉刷新功能
2017/07/18 Javascript
微信小程序url与token设置详解
2017/09/26 Javascript
es6 filter() 数组过滤方法总结
2019/04/03 Javascript
vue 通过绑定事件获取当前行的id操作
2020/07/27 Javascript
[45:50]完美世界DOTA2联赛PWL S3 CPG vs Forest 第二场 12.16
2020/12/17 DOTA
Python随机读取文件实现实例
2017/05/25 Python
利用python模拟实现POST请求提交图片的方法
2017/07/25 Python
Python实现去除列表中重复元素的方法小结【4种方法】
2018/04/27 Python
Python 实现两个服务器之间文件的上传方法
2019/02/13 Python
python实现趣味图片字符化
2019/04/30 Python
关于python字符串方法分类详解
2019/08/20 Python
快速解决Django关闭Debug模式无法加载media图片与static静态文件
2020/04/07 Python
python中绕过反爬虫的方法总结
2020/11/25 Python
美国最大的船只买卖在线市场:Boat Trader
2018/08/04 全球购物
main 主函数执行完毕后,是否可能会再执行一段代码,给出说明
2012/12/05 面试题
大学生就业推荐信范文
2013/11/29 职场文书
蔬菜基地的创业计划书
2014/01/06 职场文书
安全生产大检查方案
2014/05/07 职场文书
关于运动会广播稿300字
2014/10/05 职场文书
学校党员个人问题整改措施思想汇报
2014/10/08 职场文书
党员专题组织生活会发言材料
2014/10/17 职场文书
迁户口计划生育证明
2014/10/19 职场文书
2014年工商所工作总结
2014/12/09 职场文书
特此通知格式
2015/04/27 职场文书
Win10系统下配置Java环境变量
2021/06/13 Java/Android