js recorder.js录音 websocket springboot接收简单案例

最新推荐文章于 2024-06-21 17:37:37 发布
最新推荐文章于 2024-06-21 17:37:37 发布
阅读量2.1k 收藏 11
点赞数 6
分类专栏： 前端技术 文章标签： websocket
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34168515/article/details/107579538
版权

文章目录

一、前言

websocket的搭建，可以参考我之前的文章

https://blog.csdn.net/qq_34168515/article/details/107578932

1.1 说明

两种情况：

  • 1、如果是边录音边发送，后端接收流之后，会出现音频文件无法播放的情况，需要重新剪辑后才可以播放的情况。

  • 2、为了让案例看起来更加简单，本案例，直接前端录音完，再发送到后台，后台转发成音频文件。是一个伪实时的录音发送，但是也是一个对于刚刚接触的同学来说，也是一个不错的案例

2.2 图片说明

页面
在这里插入图片描述
点击开始按钮，开始录音
点解结束按钮，录音结束
在这里插入图片描述

二、js 代码

需要的js代码，本文全部提供

example_simple_exportwav.html

<!DOCTYPE html>

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Live input record and playback</title>
  <style type='text/css'>
    ul { list-style: none; }
    #recordingslist audio { display: block; margin-bottom: 10px; }
  </style>
</head>
<body>

  <button onclick="start(this);">开始</button>
  <button onclick="stop(this);">结束</button>
  <ul id="recordingslist"></ul>

  <script>

      var recorder;
      var audio_context;
      var intervalKey;

function start(button) {
        navigator.mediaDevices.getUserMedia({ audio: true }).then(function (stream) {
            var input = new AudioContext().createMediaStreamSource(stream);
            recorder = new Recorder(input);
            recorder.record();

            //intervalKey = setInterval(function() {
            //if (ws.readyState == 1) { //ws进入连接状态，则每隔500毫秒发送一包数据
                //recorder.clear();
                //sendData();

            //}
            //}, 3000);

        });
        button.disabled = true;
        button.nextElementSibling.disabled = false;

    // export a wav every second, so we can send it using websockets
       // ws.binaryType = 'arraybuffer'; //传输的是 ArrayBuffer 类型的数据

            console.log('握手成功');

    ws.onclose = function (e) {
        console.log('websocket 断开: ' + e.code + ' ' + e.reason + ' ' + e.wasClean)
        console.log(e)
    }
 
}

      var sendData = function() { //对以获取的数据进行处理(分包)
          var reader = new FileReader();
          reader.onload = e => {
              var outbuffer = e.target.result;
              var arr = new Int8Array(outbuffer);
              if (arr.length > 0) {
                  var tmparr = new Int8Array(1024);
                  var j = 0;
                  for (var i = 0; i < arr.byteLength; i++) {
                      tmparr[j++] = arr[i];
                      if (((i + 1) % 1024) == 0) {
                          ws.send(tmparr);
                          console.log(tmparr)
                          if (arr.byteLength - i - 1 >= 1024) {
                              tmparr = new Int8Array(1024);
                          } else {
                              tmparr = new Int8Array(arr.byteLength - i - 1);
                          }
                          j = 0;
                      }
                      if ((i + 1 == arr.byteLength) && ((i + 1) % 1024) != 0) {
                          ws.send(tmparr);
                          console.log(tmparr);
                      }
                  }
              }
              ws.close();
          };
          recorder.exportWAV(function (blob) {
              reader.readAsArrayBuffer(blob);//这里拿到mp3格式的音频流写入到reader中
          })
      };

      ws = new WebSocket("ws://localhost:8888/send/110");

function stop(button) {

    clearInterval(intervalKey);

        recorder && recorder.stop();
        button.disabled = true;
        button.previousElementSibling.disabled = false;
        createDownloadLink();

        recorder.clear();
}

      function sendDate1() {
          recorder && recorder.exportWAV(function (blob) {
              recorder.clear();
              ws.send(blob);
          });
      }

function createDownloadLink() {

        sendData();
        //ws.send("你好");

        recorder && recorder.exportWAV(function (blob) {
            var reader = new FileReader();
 
            reader.onloadend = function () {
                var data = reader.result;
            }
            reader.readAsDataURL(blob);
            var url = URL.createObjectURL(blob);
            var li = document.createElement('li');
            var au = document.createElement('audio');
            var hf = document.createElement('a');
 
            au.controls = true;
            au.src = url;
            hf.href = url;
            hf.download = new Date().toISOString() + '.wav';
            hf.innerHTML = hf.download;
            li.appendChild(au);
            li.appendChild(hf);
            recordingslist.appendChild(li);
        });
    }


  </script>

  <script src="../dist/recorder.js"></script>
</body>
</html>

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/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;
                }
            };

            //设置wav的采集频率和通道
            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)
});

三、后台springboot-websocket代码

在这里插入图片描述

@ServerEndpoint("/send/{key}")
@Component
public class ServerSocket {

    private static final Map<String, Session> connections = new Hashtable<>();
    ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream();

    /***
     * 打开连接
     */
    @OnOpen
    public void onOpen(@PathParam("key") String id, Session session) {
        System.out.println(id + "连上了");
        connections.put(id, session);
    }

    /**
     * 接收消息
     */
    @OnMessage
    public void onMessage(@PathParam("key") String id, InputStream inputStream) {
        System.out.println("来自" + id);
        try {
            int rc = 0;
            byte[] buff = new byte[100];
            while ((rc = inputStream.read(buff, 0, 100)) > 0) {
                byteArrayOutputStream.write(buff, 0, rc);
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    /**
     * 异常处理
     *
     * @param throwable
     */
    @OnError
    public void onError(Throwable throwable) {
        throwable.printStackTrace();
        //TODO 日志打印异常
    }

    /**
     * 关闭连接
     */
    @OnClose
    public void onClose(@PathParam("key") String id) {
        System.out.println(id + "断开");
        BufferedOutputStream bos = null;
        FileOutputStream fos = null;
        File file = null;
        try {
            file = new File("D:\\testtest.wav");

            //输出流
            fos = new FileOutputStream(file);

            //缓冲流
            bos = new BufferedOutputStream(fos);

            //将字节数组写出
            bos.write(byteArrayOutputStream.toByteArray());
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            if (bos != null) {
                try {
                    bos.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
            if (fos != null) {
                try {
                    fos.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }

        connections.remove(id);
    }
}

三、结尾

有疑问，留下评论，我还有不少好案例

大部分的程序员，都是面向百度或者谷歌进行编程的，而网上的资料乱七八糟，有时候找起来让人难受，于是本人无偿进行资料收集的工作，大部分资料都是本人实打实收集的而且测试过，大家不用怀疑准确性，奈何能力有限，免于遗漏，希望读者可以在评论或者私信我，进行改正，大家一起为互联网技术做贡献。

========================

收集资料枯燥无味，如果本文对你有帮助，可以点个赞，这个也是对我最大的鼓励和赞许。

本人行不改名坐不改姓，潮汕的灿灿展

立志在互联网这一行，做出自己的贡献

========================

是潮汕的灿灿展吖
关注
  • 6
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
Recorder.js
08-12
Recorder.js
Recorder.js 纯HTML5+JS网页录音
04-10
# recorder.js :microphone:基于HTML5的录音功能，输出格式为mp3文件。 ## 前言 完全依赖H5原生API 所涉及的API：`WebRTC、AudioContext、Worker、Video/Audio API、Blob、URL` ## 兼容性 Chrome、FF、Edge、QQ、360(注：目前IE和Safari全版本不兼容) 其中Chrome47以上以及QQ浏览器强制要求HTTPS的支持 请尝试使用FF、Edge、360等浏览器进行体验，或将项目下载到本地通过localhost的方式   ## 使用方式 ```js var recorder = new Recorder({ sampleRate: 44100, //采样频率，默认为44100Hz(标准MP3采样率) bitRate: 128, //比特率，默认为128kbps(标准MP3质量) success: function(){ //成功回调函数 }, error: function(msg){ //失败回调函数 }, fix: function(msg){ //不支持H5录音回调函数 } }); ``` ## API ```js //开始录音 recorder.start(); //停止录音 recorder.stop(); //获取MP3编码的Blob格式音频文件 recorder.getBlob(function(blob){ //获取成功回调函数，blob即为音频文件 // ... },function(msg){ //获取失败回调函数，msg为错误信息 // ... }); ```
HTML5 JS录音功能,简单介绍recorder.js 基于Html5录音功能的实现
weixin_30938297的博客
06-09 1228
这篇文章主要介绍了recorder.js 基于Html5录音功能的实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧recorder.jsmicrophone基于HTML5的录音功能，输出格式为mp3文件。前言完全依赖H5原生API所涉及的API：WebRTC、AudioContext、Worker、Video/Audio A...
web网页录音(recorder.js)并上传后端语音转文字(Vosk)
m0_48639280的博客
05-13 883
离线语音转换文字VOSK
【ai应用开发】Spring Boot集成实时通信、语音识别和语音合成功能
最新发布
猿脑2.0的博客
06-21 520
【代码】【ai应用开发】Spring Boot集成实时通信、语音识别和语音合成功能。
探秘Simple Recorder.js Demo：一款轻量级的声音录制工具
gitblog_00093的博客
04-27 401
探秘Simple Recorder.js Demo：一款轻量级的声音录制工具 项目地址:https://gitcode.com/addpipe/simple-recorderjs-demo 在网页交互日益丰富的今天，声音记录功能成为了许多应用场景的需求，如在线教育、社交媒体和在线客服等。Simple Recorder.js Demo 是一个基于Web Audio API的开源项目，它提供了一个简单...
recorder.js
weixin_30436101的博客
01-15 690
(function (f) { if (typeof exports === "object" && typeof module !== "undefined") { module.exports = f() } else if (typeof define === "function" && define.amd...
pc端使用Recorder.js 实现语音录制功能
weixin_43493113的博客
12-18 1277
Recorder.js文件。
Recorder.js：一款简单的Web音频录制库
gitblog_00030的博客
03-17 2174
Recorder.js：一款简单的Web音频录制库 Recorder.js 是一个轻量级的JavaScript库，它允许你在浏览器中轻松地录制、处理和保存音频数据。借助Recorder.js，你可以构建各种有趣的Web应用程序，如语音备忘录、在线录音室或教育工具。 功能与应用案例 使用Recorder.js，您可以实现以下功能： 录音：在Web页面上为用户提供简单的录音体验。 剪辑和处理：对音频...
vue使用recorder.js实现录音功能
10-15
在Vue项目中实现录音功能，我们可以借助第三方库recorder.js。Recorder.js是一个轻量级的JavaScript库，用于在Web浏览器中录制音频。以下是如何在Vue中集成并使用recorder.js的详细步骤： 1. **引入外部JS文件**： ...
HTML5录音插件Recorder.js
06-01
HTML5录音插件Recorder.js是基于Web Audio API的JavaScript库，它允许用户通过浏览器的麦克风进行录音，并将录制的音频保存为WAV格式。这个技术的出现极大地丰富了网页应用的功能，使得开发者能够创建出更具交互性的...
网页端录音Recorder.js，单声道16k采样率录音工具
07-04
网页端录音Recorder.js，单声道16k采样率录音工具，在使用各大平台语音转文字时可用
JS-Audio-Recorder
07-06
JS录音机 这是什么？ 这是一个仅使用 HTML 和 Javascript 实现录音功能的演示程序。您可以使用录音、回放录音、保存语音等功能。 操作环境 它是比 Google Chrome 23 更新的版本，可在启用了网络音频输入的环境中使用。 要启用 Web 音频输入，您需要执行以下操作：首先，启动谷歌浏览器后，在地址栏中指定chrome://flags 。接下来，在 Web Audio Input 项中单击“启用”后，重新启动 Google Chrome。 如何使用 首先，当您打开页面时，会要求您授予访问麦克风的权限，因此请单击权限按钮。然后点击录制按钮开始录制。此时录音按钮变为停止按钮，点击该停止按钮停止录音。如果录音过程成功，按钮顶部显示的播放器可以播放录制的语音。您还可以通过单击下载按钮播放录制的语音。
recorder js 录音
05-07
recorder js 录音
recorder.mp3.min.js
01-16
录音Js beiyong 录音Js beiyong 录音Js beiyong 录音Js beiyong
recorder.js 引用
04-19
recorder.js是一个用于在Web浏览器中进行音频录制的JavaScript库。它允许开发者在网页上添加音频录制功能，让用户能够通过浏览器直接录制音频，并将录制的音频数据进行处理或保存。recorder.js库使用了Web Audio API...
使用 Recorder.js 在vue项目中实现录音功能
qq_41920758的博客
08-08 2033
btn_not_pressed_img: require("@/img/按钮未按状态.png"),console.log("音频设备打开失败, err= ", err);btn_pressed_img: require("@/img/按钮按下状态.png")console.log("录音设备关闭失败,err= ", err);console.log("没有在录音，请长按按钮");console.log("开始录音");
h5 如何录音保存上传_H5录音及保存到后台recorder.js实现
06-03
要在 H5 中录音并保存上传，可以使用 recorder.js 插件实现。以下是具体步骤： 1. 引入 recorder.js 插件 ``` <script src="path/to/recorder.js"></script> ``` 2. 创建录音对象 ``` var recorder = new Recorder({ // 配置参数 }); ``` 3. 开始录音 ``` recorder.start(); ``` 4. 停止录音 ``` recorder.stop(); ``` 5. 保存录音并上传到后台 ``` var data = recorder.getBlob(); // 获取录音数据 var formData = new FormData(); formData.append('audio', data); // 将录音数据添加到表单数据中 // 发送表单数据到后台 fetch('upload.php', { method: 'POST', body: formData }).then(function(response) { console.log('上传成功'); }).catch(function(error) { console.error('上传失败', error); }); ``` 其中，upload.php 是后台处理上传的 PHP 文件，可以根据实际情况自行编写。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值