masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial js > 如何利用js实现录音上传功能

如何利用js实现录音上传功能

王林
Lepaskan： 2020-04-15 09:21:57
ke hadapan
3051 orang telah melayarinya

如何利用js实现录音上传功能

具体代码如下所示：

1、html页面

<!DOCTYPE html>
<html>
<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: &#39;post&#39;,
    processData: false,
    contentType: false,
    data: formdata,
    dataType: &#39;json&#39;,
    success: function (data) {
     console.log(data);
     document.getElementById("player").src = "/get_audio/" + data.filename;
    }
   })
  });
  reco.clear();
 }

</script>
</html>
Salin selepas log masuk

（相关教程推荐：js教程）

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 &#39;"+o+"&#39;");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){
&#39;use strict&#39;;

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(&#39;inline-worker&#39;);

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: &#39;audio_pcm/wav&#39;
  };
  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: &#39;record&#39;,
    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 &#39;init&#39;:
      init(e.data.config);
      break;
     case &#39;record&#39;:
      record(e.data.buffer);
      break;
     case &#39;exportWAV&#39;:
      exportWAV(e.data.type);
      break;
     case &#39;getBuffer&#39;:
      getBuffer();
      break;
     case &#39;clear&#39;:
      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: &#39;exportWAV&#39;, data: audioBlob });
   }

   function getBuffer() {
    var buffers = [];
    for (var channel = 0; channel < numChannels; channel++) {
     buffers.push(mergeBuffers(recBuffers[channel], recLength));
    }
    self.postMessage({ command: &#39;getBuffer&#39;, 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, &#39;RIFF&#39;);
    /* RIFF chunk length */
    view.setUint32(4, 36 + samples.length * 2, true);
    /* RIFF type */
    writeString(view, 8, &#39;WAVE&#39;);
    /* format chunk identifier */
    writeString(view, 12, &#39;fmt &#39;);
    /* 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, &#39;data&#39;);
    /* data chunk length */
    view.setUint32(40, samples.length * 2, true);

    floatTo16BitPCM(view, 44, samples);

    return view;
   }
  }, self);

  this.worker.postMessage({
   command: &#39;init&#39;,
   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 == &#39;function&#39;) {
    cb(e.data.data);
   }
  };
 }

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

   this.callbacks.getBuffer.push(cb);

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

   this.callbacks.exportWAV.push(cb);

   this.worker.postMessage({
    command: &#39;exportWAV&#39;,
    type: mimeType
   });
  }
 }], [{
  key: &#39;forceDownload&#39;,
  value: function forceDownload(blob, filename) {
   var url = (window.URL || window.webkitURL).createObjectURL(blob);
   var link = window.document.createElement(&#39;a&#39;);
   link.href = url;
   link.download = filename || &#39;output.wav&#39;;
   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)
});
Salin selepas log masuk

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))

...
Salin selepas log masuk

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

Atas ialah kandungan terperinci 如何利用js实现录音上传功能. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
js rakaman
sumber：jb51.net
Artikel sebelumnya：js如何实现随机生成div的效果 Artikel seterusnya：js变量的基本使用方法介绍
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Bolehkah kumpulan pekerja yang diisytiharkan dalam berbilang laluan masih mengekalkan penggunaan cpunya tanpa mengambil berat tentang ambang Saya berharap untuk mencari sistem node.js dengan kumpulan pekerja untuk mengendalikan tug...
daripada 2024-04-06 19:54:23
0
1
444
Titik Scatterplot tidak mengekalkan nilai semasa mengezum masuk d3.js Ini adalah kali pertama saya menggunakan d3.js, jadi harap bersabar. Saya melaksanakannya ...
daripada 2024-04-06 18:16:26
0
1
403
Tunjukkan panel sisi tersembunyi: ditandai Saya ingin mempunyai menu navigasi dalam panel sisi dengan keupayaan untuk beralih kepada ...
daripada 2024-04-06 15:49:33
0
1
319
Patutkah kita menggunakan SSG untuk menggunakan papan pemuka yang dibuat dengan Nuxt.js? Kami akan membangunkan papan pemuka untuk kegunaan dalaman menggunakan Nuxt.js. Memandangk...
daripada 2024-04-06 13:17:44
0
1
493
Elektron mendapat AppData pada pramuat Bagaimana untuk mendapatkan direktori AppData yang dipramuat? Background.js[...]asyncfunct...
daripada 2024-04-06 11:05:31
0
1
417
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan