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

朱雀 2020-04-17 07:47 959阅读 0赞

1、html页面

```html
<!DOCTYPE html>
<html>

<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();
    }

</html>
```

2、Recorder.js内容

```javascript
(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 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 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));
                                }
                            }

3、flask写法

```javascript
...
``@
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可能会报错。**