From 57a1af939214cb299e87b605efbd7013dccee1a8 Mon Sep 17 00:00:00 2001 From: jialin Date: Mon, 16 Dec 2024 18:33:59 +0800 Subject: [PATCH] fix: convert recording to mp3 --- package.json | 4 +- pnpm-lock.yaml | 412 ++---------------- .../playground/components/audio-input.tsx | 118 +++-- .../playground/components/ground-stt.tsx | 2 - typings.d.ts | 1 + 5 files changed, 98 insertions(+), 439 deletions(-) diff --git a/package.json b/package.json index ef9b92df..ac3db5df 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,6 @@ "dependencies": { "@ant-design/icons": "^5.5.1", "@ant-design/pro-components": "^2.7.18", - "@ffmpeg/ffmpeg": "^0.12.10", "@huggingface/gguf": "^0.1.7", "@huggingface/hub": "^0.15.1", "@huggingface/tasks": "^0.11.6", @@ -42,13 +41,13 @@ "highlight.js": "^11.10.0", "jotai": "^2.8.4", "jszip": "^3.10.1", + "lamejs": "github:zhuker/lamejs", "localforage": "^1.10.0", "lodash": "^4.17.21", "mammoth": "^1.8.0", "marked": "^14.1.0", "ml-dataset-iris": "^1.2.1", "ml-pca": "^4.1.1", - "node-vibrant": "3.1.6", "numeral": "^2.0.6", "overlayscrollbars": "^2.10.0", "overlayscrollbars-react": "^0.5.6", @@ -62,7 +61,6 @@ "react-hotkeys-hook": "^4.5.0", "simplebar-react": "^3.2.6", "umi-presets-pro": "^2.0.3", - "vibrant": "^0.0.1", "wavesurfer.js": "^7.8.8", "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d38ec150..6ea43b22 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -14,9 +14,6 @@ dependencies: '@ant-design/pro-components': specifier: ^2.7.18 version: 2.7.19(antd@5.21.6)(rc-field-form@2.4.0)(react-dom@18.2.0)(react@18.2.0) - '@ffmpeg/ffmpeg': - specifier: ^0.12.10 - version: 0.12.10 '@huggingface/gguf': specifier: ^0.1.7 version: 0.1.7 @@ -89,6 +86,9 @@ dependencies: jszip: specifier: ^3.10.1 version: 3.10.1 + lamejs: + specifier: github:zhuker/lamejs + version: github.com/zhuker/lamejs/582bbba6a12f981b984d8fb9e1874499fed85675 localforage: specifier: ^1.10.0 version: 1.10.0 @@ -107,9 +107,6 @@ dependencies: ml-pca: specifier: ^4.1.1 version: 4.1.1 - node-vibrant: - specifier: 3.1.6 - version: 3.1.6 numeral: specifier: ^2.0.6 version: 2.0.6 @@ -149,9 +146,6 @@ dependencies: umi-presets-pro: specifier: ^2.0.3 version: 2.0.3(@babel/core@7.25.7)(@types/react-dom@18.3.0)(@types/react@18.3.1)(antd@5.21.6)(dva@2.5.0-beta.2)(rc-field-form@2.4.0)(react-dom@18.2.0)(react@18.2.0)(umi@4.3.24) - vibrant: - specifier: ^0.0.1 - version: 0.0.1 wavesurfer.js: specifier: ^7.8.8 version: 7.8.8 @@ -4132,18 +4126,6 @@ packages: resolution: {integrity: sha512-5Aap/GaRupgNx/feGBwLLTVv8OQFfv3pq2lPRzPg9R+IOBnDgghTGW7l7EuVXOvg5cc/xSAlRW8rBrjIC3Nvqw==, tarball: https://registry.npmjs.org/@exodus/schemasafe/-/schemasafe-1.3.0.tgz} dev: false - /@ffmpeg/ffmpeg@0.12.10: - resolution: {integrity: sha512-lVtk8PW8e+NUzGZhPTWj2P1J4/NyuCrbDD3O9IGpSeLYtUZKBqZO8CNj1WYGghep/MXoM8e1qVY1GztTkf8YYQ==, tarball: https://registry.npmjs.org/@ffmpeg/ffmpeg/-/ffmpeg-0.12.10.tgz} - engines: {node: '>=18.x'} - dependencies: - '@ffmpeg/types': 0.12.2 - dev: false - - /@ffmpeg/types@0.12.2: - resolution: {integrity: sha512-NJtxwPoLb60/z1Klv0ueshguWQ/7mNm106qdHkB4HL49LXszjhjCCiL+ldHJGQ9ai2Igx0s4F24ghigy//ERdA==, tarball: https://registry.npmjs.org/@ffmpeg/types/-/types-0.12.2.tgz} - engines: {node: '>=16.x'} - dev: false - /@floating-ui/core@0.6.2: resolution: {integrity: sha512-jktYRmZwmau63adUG3GKOAVCofBXkk55S/zQ94XOorAHhwqFIOFAy1rSp2N0Wp6/tGbe9V3u/ExlGZypyY17rg==, tarball: https://registry.npmjs.org/@floating-ui/core/-/core-0.6.2.tgz} dev: false @@ -4402,120 +4384,6 @@ packages: chalk: 4.1.2 dev: false - /@jimp/bmp@0.16.13(@jimp/custom@0.16.13): - resolution: {integrity: sha512-9edAxu7N2FX7vzkdl5Jo1BbACfycUtBQX+XBMcHA2bk62P8R0otgkHg798frgAk/WxQIzwxqOH6wMiCwrlAzdQ==, tarball: https://registry.npmjs.org/@jimp/bmp/-/bmp-0.16.13.tgz} - peerDependencies: - '@jimp/custom': '>=0.3.5' - dependencies: - '@babel/runtime': 7.25.7 - '@jimp/custom': 0.16.13 - '@jimp/utils': 0.16.13 - bmp-js: 0.1.0 - dev: false - - /@jimp/core@0.16.13: - resolution: {integrity: sha512-qXpA1tzTnlkTku9yqtuRtS/wVntvE6f3m3GNxdTdtmc+O+Wcg9Xo2ABPMh7Nc0AHbMKzwvwgB2JnjZmlmJEObg==, tarball: https://registry.npmjs.org/@jimp/core/-/core-0.16.13.tgz} - dependencies: - '@babel/runtime': 7.25.7 - '@jimp/utils': 0.16.13 - any-base: 1.1.0 - buffer: 5.7.1 - exif-parser: 0.1.12 - file-type: 16.5.4 - load-bmfont: 1.4.2 - mkdirp: 0.5.6 - phin: 2.9.3 - pixelmatch: 4.0.2 - tinycolor2: 1.6.0 - transitivePeerDependencies: - - debug - dev: false - - /@jimp/custom@0.16.13: - resolution: {integrity: sha512-LTATglVUPGkPf15zX1wTMlZ0+AU7cGEGF6ekVF1crA8eHUWsGjrYTB+Ht4E3HTrCok8weQG+K01rJndCp/l4XA==, tarball: https://registry.npmjs.org/@jimp/custom/-/custom-0.16.13.tgz} - dependencies: - '@babel/runtime': 7.25.7 - '@jimp/core': 0.16.13 - transitivePeerDependencies: - - debug - dev: false - - /@jimp/gif@0.16.13(@jimp/custom@0.16.13): - resolution: {integrity: sha512-yFAMZGv3o+YcjXilMWWwS/bv1iSqykFahFMSO169uVMtfQVfa90kt4/kDwrXNR6Q9i6VHpFiGZMlF2UnHClBvg==, tarball: https://registry.npmjs.org/@jimp/gif/-/gif-0.16.13.tgz} - peerDependencies: - '@jimp/custom': '>=0.3.5' - dependencies: - '@babel/runtime': 7.25.7 - '@jimp/custom': 0.16.13 - '@jimp/utils': 0.16.13 - gifwrap: 0.9.4 - omggif: 1.0.10 - dev: false - - /@jimp/jpeg@0.16.13(@jimp/custom@0.16.13): - resolution: {integrity: sha512-BJHlDxzTlCqP2ThqP8J0eDrbBfod7npWCbJAcfkKqdQuFk0zBPaZ6KKaQKyKxmWJ87Z6ohANZoMKEbtvrwz1AA==, tarball: https://registry.npmjs.org/@jimp/jpeg/-/jpeg-0.16.13.tgz} - peerDependencies: - '@jimp/custom': '>=0.3.5' - dependencies: - '@babel/runtime': 7.25.7 - '@jimp/custom': 0.16.13 - '@jimp/utils': 0.16.13 - jpeg-js: 0.4.4 - dev: false - - /@jimp/plugin-resize@0.16.13(@jimp/custom@0.16.13): - resolution: {integrity: sha512-qoqtN8LDknm3fJm9nuPygJv30O3vGhSBD2TxrsCnhtOsxKAqVPJtFVdGd/qVuZ8nqQANQmTlfqTiK9mVWQ7MiQ==, tarball: https://registry.npmjs.org/@jimp/plugin-resize/-/plugin-resize-0.16.13.tgz} - peerDependencies: - '@jimp/custom': '>=0.3.5' - dependencies: - '@babel/runtime': 7.25.7 - '@jimp/custom': 0.16.13 - '@jimp/utils': 0.16.13 - dev: false - - /@jimp/png@0.16.13(@jimp/custom@0.16.13): - resolution: {integrity: sha512-8cGqINvbWJf1G0Her9zbq9I80roEX0A+U45xFby3tDWfzn+Zz8XKDF1Nv9VUwVx0N3zpcG1RPs9hfheG4Cq2kg==, tarball: https://registry.npmjs.org/@jimp/png/-/png-0.16.13.tgz} - peerDependencies: - '@jimp/custom': '>=0.3.5' - dependencies: - '@babel/runtime': 7.25.7 - '@jimp/custom': 0.16.13 - '@jimp/utils': 0.16.13 - pngjs: 3.4.0 - dev: false - - /@jimp/tiff@0.16.13(@jimp/custom@0.16.13): - resolution: {integrity: sha512-oJY8d9u95SwW00VPHuCNxPap6Q1+E/xM5QThb9Hu+P6EGuu6lIeLaNBMmFZyblwFbwrH+WBOZlvIzDhi4Dm/6Q==, tarball: https://registry.npmjs.org/@jimp/tiff/-/tiff-0.16.13.tgz} - peerDependencies: - '@jimp/custom': '>=0.3.5' - dependencies: - '@babel/runtime': 7.25.7 - '@jimp/custom': 0.16.13 - utif: 2.0.1 - dev: false - - /@jimp/types@0.16.13(@jimp/custom@0.16.13): - resolution: {integrity: sha512-mC0yVNUobFDjoYLg4hoUwzMKgNlxynzwt3cDXzumGvRJ7Kb8qQGOWJQjQFo5OxmGExqzPphkirdbBF88RVLBCg==, tarball: https://registry.npmjs.org/@jimp/types/-/types-0.16.13.tgz} - peerDependencies: - '@jimp/custom': '>=0.3.5' - dependencies: - '@babel/runtime': 7.25.7 - '@jimp/bmp': 0.16.13(@jimp/custom@0.16.13) - '@jimp/custom': 0.16.13 - '@jimp/gif': 0.16.13(@jimp/custom@0.16.13) - '@jimp/jpeg': 0.16.13(@jimp/custom@0.16.13) - '@jimp/png': 0.16.13(@jimp/custom@0.16.13) - '@jimp/tiff': 0.16.13(@jimp/custom@0.16.13) - timm: 1.7.1 - dev: false - - /@jimp/utils@0.16.13: - resolution: {integrity: sha512-VyCpkZzFTHXtKgVO35iKN0sYR10psGpV6SkcSeV4oF7eSYlR8Bl6aQLCzVeFjvESF7mxTmIiI3/XrMobVrtxDA==, tarball: https://registry.npmjs.org/@jimp/utils/-/utils-0.16.13.tgz} - dependencies: - '@babel/runtime': 7.25.7 - regenerator-runtime: 0.13.11 - dev: false - /@jridgewell/gen-mapping@0.3.5: resolution: {integrity: sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==} engines: {node: '>=6.0.0'} @@ -5010,7 +4878,7 @@ packages: dependencies: '@babel/core': 7.24.5 postcss: 7.0.39 - postcss-syntax: 0.36.2(postcss@8.4.38) + postcss-syntax: 0.36.2(postcss@7.0.39) transitivePeerDependencies: - supports-color dev: false @@ -5051,7 +4919,7 @@ packages: postcss-syntax: '>=0.36.2' dependencies: postcss: 7.0.39 - postcss-syntax: 0.36.2(postcss@8.4.38) + postcss-syntax: 0.36.2(postcss@7.0.39) remark: 13.0.0 unist-util-find-all-after: 3.0.2 transitivePeerDependencies: @@ -5245,10 +5113,6 @@ packages: use-sync-external-store: 1.2.2(react@18.2.0) dev: false - /@tokenizer/token@0.3.0: - resolution: {integrity: sha512-OvjF+z51L3ov0OyAU0duzsYuvO01PH7x4t6DJx+guahgTnBHkhJdG7soQeTSFLWN3efnHyibZ4Z8l2EuWwJN3A==, tarball: https://registry.npmjs.org/@tokenizer/token/-/token-0.3.0.tgz} - dev: false - /@trysound/sax@0.2.0: resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==, tarball: https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz} engines: {node: '>=10.13.0'} @@ -5408,14 +5272,6 @@ packages: resolution: {integrity: sha512-hov8bUuiLiyFPGyFPE1lwWhmzYbirOXQNNo40+y3zow8aFVTeyn3VWL0VFFfdNddA8S4Vf0Tc062rzyNr7Paag==} dev: false - /@types/node@10.17.60: - resolution: {integrity: sha512-F0KIgDJfy2nA3zMLmWGKxcH2ZVEtCZXHHdOQs2gSaQ27+lNeEfGxzkIw90aXswATX7AZ33tahPbzy6KAfUreVw==, tarball: https://registry.npmjs.org/@types/node/-/node-10.17.60.tgz} - dev: false - - /@types/node@16.9.1: - resolution: {integrity: sha512-QpLcX9ZSsq3YYUUnD3nFDY8H7wctAhQj/TFKL8Ya8v5fMm3CFXxo8zStsLAl780ltoYoo1WvKUVGBQK+1ifr7g==, tarball: https://registry.npmjs.org/@types/node/-/node-16.9.1.tgz} - dev: false - /@types/node@20.12.11: resolution: {integrity: sha512-vDg9PZ/zi+Nqp6boSOT7plNuthRugEKixDv5sFTIpkE89MmNtEArAShI4mxuX2+UrLEe9pxC1vm2cjm9YlWbJw==} dependencies: @@ -7722,10 +7578,6 @@ packages: - moment dev: false - /any-base@1.1.0: - resolution: {integrity: sha512-uMgjozySS8adZZYePpaWs8cxB9/kdzmpX6SgJZ+wbz1K5eYk5QMYDVJaZKhxyIHUdnnJkfR7SVgStgH7LkGUyg==, tarball: https://registry.npmjs.org/any-base/-/any-base-1.1.0.tgz} - dev: false - /anymatch@3.1.3: resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==} engines: {node: '>= 8'} @@ -8171,10 +8023,6 @@ packages: resolution: {integrity: sha512-iD3898SR7sWVRHbiQv+sHUtHnMvC1o3nW5rAcqnq3uOn07DSAppZYUkIGslDz6gXC7HfunPe7YVBgoEJASPcHA==, tarball: https://registry.npmjs.org/bluebird/-/bluebird-3.4.7.tgz} dev: false - /bmp-js@0.1.0: - resolution: {integrity: sha512-vHdS19CnY3hwiNdkaqk93DvjVLfbEcI8mys4UjuWrlX1haDmroo8o4xCzh4wD6DGV6HxRCyauwhHRqMTfERtjw==, tarball: https://registry.npmjs.org/bmp-js/-/bmp-js-0.1.0.tgz} - dev: false - /bn.js@4.12.0: resolution: {integrity: sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==, tarball: https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz} dev: false @@ -8340,11 +8188,6 @@ packages: node-int64: 0.4.0 dev: false - /buffer-equal@0.0.1: - resolution: {integrity: sha512-RgSV6InVQ9ODPdLWJ5UAqBqJBOg370Nz6ZQtRzpt6nUjc8v0St97uJ4PYC6NztqIScrAXafKM3mZPMygSe1ggA==, tarball: https://registry.npmjs.org/buffer-equal/-/buffer-equal-0.0.1.tgz} - engines: {node: '>=0.4.0'} - dev: false - /buffer-from@0.1.2: resolution: {integrity: sha512-RiWIenusJsmI2KcvqQABB83tLxCByE3upSP8QU3rJDMVFGPWLvPQJt/O1Su9moRWeH7d+Q2HYb68f6+v+tw2vg==} dev: false @@ -8372,13 +8215,6 @@ packages: isarray: 1.0.0 dev: false - /buffer@5.7.1: - resolution: {integrity: sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==, tarball: https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz} - dependencies: - base64-js: 1.5.1 - ieee754: 1.2.1 - dev: false - /builtin-status-codes@3.0.0: resolution: {integrity: sha512-HpGFw18DgFWlncDfjTa2rcQ4W88O1mC8e8yZ2AvQY5KDaktSTwo+KRf6nHK6FRI5FyRyb/5T6+TSxfP7QyGsmQ==, tarball: https://registry.npmjs.org/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz} dev: false @@ -8475,14 +8311,6 @@ packages: engines: {node: '>=4'} dev: true - /centra@2.7.0: - resolution: {integrity: sha512-PbFMgMSrmgx6uxCdm57RUos9Tc3fclMvhLSATYN39XsDV29B89zZ3KA89jmY0vwSGazyU+uerqwa6t+KaodPcg==, tarball: https://registry.npmjs.org/centra/-/centra-2.7.0.tgz} - dependencies: - follow-redirects: 1.15.6 - transitivePeerDependencies: - - debug - dev: false - /chalk@2.4.2: resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==} engines: {node: '>=4'} @@ -10677,10 +10505,6 @@ packages: resolution: {integrity: sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw==, tarball: https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz} dev: false - /exif-parser@0.1.12: - resolution: {integrity: sha512-c2bQfLNbMzLPmzQuOr8fy0csy84WmwnER81W88DzTp9CYNPJ6yzOj2EZAh9pywYpqHnshVLHQJ8WzldAyfY+Iw==, tarball: https://registry.npmjs.org/exif-parser/-/exif-parser-0.1.12.tgz} - dev: false - /express-http-proxy@2.1.1: resolution: {integrity: sha512-4aRQRqDQU7qNPV5av0/hLcyc0guB9UP71nCYrQEYml7YphTo8tmWf3nDZWdTJMMjFikyz9xKXaURor7Chygdwg==, tarball: https://registry.npmjs.org/express-http-proxy/-/express-http-proxy-2.1.1.tgz} engines: {node: '>=6.0.0'} @@ -10876,15 +10700,6 @@ packages: webpack: 5.95.0 dev: true - /file-type@16.5.4: - resolution: {integrity: sha512-/yFHK0aGjFEgDJjEKP0pWCplsPFPhwyfwevf/pVxiN0tmE4L9LmwWxWukdJSHdoCli4VgQLehjJtwQBnqmsKcw==, tarball: https://registry.npmjs.org/file-type/-/file-type-16.5.4.tgz} - engines: {node: '>=10'} - dependencies: - readable-web-to-node-stream: 3.0.2 - strtok3: 6.3.0 - token-types: 4.2.1 - dev: false - /fill-range@7.0.1: resolution: {integrity: sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==} engines: {node: '>=8'} @@ -11188,13 +11003,6 @@ packages: resolve-pkg-maps: 1.0.0 dev: false - /gifwrap@0.9.4: - resolution: {integrity: sha512-MDMwbhASQuVeD4JKd1fKgNgCRL3fGqMM4WaqpNhWO0JiMOAjbQdumbs4BbBZEy9/M00EHEjKN3HieVhCUlwjeQ==, tarball: https://registry.npmjs.org/gifwrap/-/gifwrap-0.9.4.tgz} - dependencies: - image-q: 4.0.0 - omggif: 1.0.10 - dev: false - /git-hooks-list@1.0.3: resolution: {integrity: sha512-Y7wLWcrLUXwk2noSka166byGCvhMtDRpgHdzCno1UQv/n/Hegp++a2xBWJL1lJarnKD3SWaljD+0z1ztqxuKyQ==, tarball: https://registry.npmjs.org/git-hooks-list/-/git-hooks-list-1.0.3.tgz} dev: false @@ -11706,12 +11514,6 @@ packages: resolution: {integrity: sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==} engines: {node: '>= 4'} - /image-q@4.0.0: - resolution: {integrity: sha512-PfJGVgIfKQJuq3s0tTDOKtztksibuUEbJQIYT3by6wctQo+Rdlh7ef4evJ5NCdxY4CfMbvFkocEwbl4BF8RlJw==, tarball: https://registry.npmjs.org/image-q/-/image-q-4.0.0.tgz} - dependencies: - '@types/node': 16.9.1 - dev: false - /image-size@0.5.5: resolution: {integrity: sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==, tarball: https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz} engines: {node: '>=0.10.0'} @@ -12007,10 +11809,6 @@ packages: get-east-asian-width: 1.2.0 dev: true - /is-function@1.0.2: - resolution: {integrity: sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ==, tarball: https://registry.npmjs.org/is-function/-/is-function-1.0.2.tgz} - dev: false - /is-generator-function@1.0.10: resolution: {integrity: sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==} engines: {node: '>= 0.4'} @@ -12349,10 +12147,6 @@ packages: react: 18.2.0 dev: false - /jpeg-js@0.4.4: - resolution: {integrity: sha512-WZzeDOEtTOBK4Mdsar0IqEU5sMr3vSV2RqkAIzUEV2BHnUfKGyswWFPFwK5EeDo93K3FohSHbLAjj0s1Wzd+dg==, tarball: https://registry.npmjs.org/jpeg-js/-/jpeg-js-0.4.4.tgz} - dev: false - /js-cookie@2.2.1: resolution: {integrity: sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==, tarball: https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz} dev: false @@ -12691,21 +12485,6 @@ packages: wrap-ansi: 9.0.0 dev: true - /load-bmfont@1.4.2: - resolution: {integrity: sha512-qElWkmjW9Oq1F9EI5Gt7aD9zcdHb9spJCW1L/dmPf7KzCCEJxq8nhHz5eCgI9aMf7vrG/wyaCqdsI+Iy9ZTlog==, tarball: https://registry.npmjs.org/load-bmfont/-/load-bmfont-1.4.2.tgz} - dependencies: - buffer-equal: 0.0.1 - mime: 1.6.0 - parse-bmfont-ascii: 1.0.6 - parse-bmfont-binary: 1.0.6 - parse-bmfont-xml: 1.1.6 - phin: 3.7.1 - xhr: 2.6.0 - xtend: 4.0.2 - transitivePeerDependencies: - - debug - dev: false - /loader-runner@4.3.0: resolution: {integrity: sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==, tarball: https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz} engines: {node: '>=6.11.5'} @@ -13174,13 +12953,6 @@ packages: dev: false optional: true - /mkdirp@0.5.6: - resolution: {integrity: sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==, tarball: https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz} - hasBin: true - dependencies: - minimist: 1.2.8 - dev: false - /mkdirp@1.0.4: resolution: {integrity: sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==, tarball: https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz} engines: {node: '>=10'} @@ -13435,20 +13207,6 @@ packages: /node-releases@2.0.18: resolution: {integrity: sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==, tarball: https://registry.npmjs.org/node-releases/-/node-releases-2.0.18.tgz} - /node-vibrant@3.1.6: - resolution: {integrity: sha512-Wlc/hQmBMOu6xon12ZJHS2N3M+I6J8DhrD3Yo6m5175v8sFkVIN+UjhKVRcO+fqvre89ASTpmiFEP3nPO13SwA==, tarball: https://registry.npmjs.org/node-vibrant/-/node-vibrant-3.1.6.tgz} - dependencies: - '@jimp/custom': 0.16.13 - '@jimp/plugin-resize': 0.16.13(@jimp/custom@0.16.13) - '@jimp/types': 0.16.13(@jimp/custom@0.16.13) - '@types/lodash': 4.17.4 - '@types/node': 10.17.60 - lodash: 4.17.21 - url: 0.11.3 - transitivePeerDependencies: - - debug - dev: false - /nopt@5.0.0: resolution: {integrity: sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==, tarball: https://registry.npmjs.org/nopt/-/nopt-5.0.0.tgz} engines: {node: '>=6'} @@ -13671,10 +13429,6 @@ packages: resolution: {integrity: sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==} dev: false - /omggif@1.0.10: - resolution: {integrity: sha512-LMJTtvgc/nugXj0Vcrrs68Mn2D1r0zf630VNtqtpI1FEO7e+O9FP4gqs9AcnBaSEeoHIPm28u6qgPR0oyEpGSw==, tarball: https://registry.npmjs.org/omggif/-/omggif-1.0.10.tgz} - dev: false - /omit.js@2.0.2: resolution: {integrity: sha512-hJmu9D+bNB40YpL9jYebQl4lsTW6yEHRTroJzNLqQJYHm7c+NQnJGfZmIWh8S3q3KoaxV1aLhV6B3+0N0/kyJg==, tarball: https://registry.npmjs.org/omit.js/-/omit.js-2.0.2.tgz} dev: false @@ -13854,21 +13608,6 @@ packages: safe-buffer: 5.2.1 dev: false - /parse-bmfont-ascii@1.0.6: - resolution: {integrity: sha512-U4RrVsUFCleIOBsIGYOMKjn9PavsGOXxbvYGtMOEfnId0SVNsgehXh1DxUdVPLoxd5mvcEtvmKs2Mmf0Mpa1ZA==, tarball: https://registry.npmjs.org/parse-bmfont-ascii/-/parse-bmfont-ascii-1.0.6.tgz} - dev: false - - /parse-bmfont-binary@1.0.6: - resolution: {integrity: sha512-GxmsRea0wdGdYthjuUeWTMWPqm2+FAd4GI8vCvhgJsFnoGhTrLhXDDupwTo7rXVAgaLIGoVHDZS9p/5XbSqeWA==, tarball: https://registry.npmjs.org/parse-bmfont-binary/-/parse-bmfont-binary-1.0.6.tgz} - dev: false - - /parse-bmfont-xml@1.1.6: - resolution: {integrity: sha512-0cEliVMZEhrFDwMh4SxIyVJpqYoOWDJ9P895tFuS+XuNzI5UBmBk5U5O4KuJdTnZpSBI4LFA2+ZiJaiwfSwlMA==, tarball: https://registry.npmjs.org/parse-bmfont-xml/-/parse-bmfont-xml-1.1.6.tgz} - dependencies: - xml-parse-from-string: 1.0.1 - xml2js: 0.5.0 - dev: false - /parse-entities@2.0.0: resolution: {integrity: sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==, tarball: https://registry.npmjs.org/parse-entities/-/parse-entities-2.0.0.tgz} dependencies: @@ -13880,10 +13619,6 @@ packages: is-hexadecimal: 1.0.4 dev: false - /parse-headers@2.0.5: - resolution: {integrity: sha512-ft3iAoLOB/MlwbNXgzy43SWGP6sQki2jQvAyBg/zDFAgr9bfNWZIUj42Kw2eJIl8kEi4PbgE6U1Zau/HwI75HA==, tarball: https://registry.npmjs.org/parse-headers/-/parse-headers-2.0.5.tgz} - dev: false - /parse-json@5.2.0: resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==} engines: {node: '>=8'} @@ -14004,29 +13739,10 @@ packages: - supports-color dev: false - /peek-readable@4.1.0: - resolution: {integrity: sha512-ZI3LnwUv5nOGbQzD9c2iDG6toheuXSZP5esSHBjopsXH4dg19soufvpUGA3uohi5anFtGb2lhAVdHzH6R/Evvg==, tarball: https://registry.npmjs.org/peek-readable/-/peek-readable-4.1.0.tgz} - engines: {node: '>=8'} - dev: false - /performance-now@2.1.0: resolution: {integrity: sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==, tarball: https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz} dev: false - /phin@2.9.3: - resolution: {integrity: sha512-CzFr90qM24ju5f88quFC/6qohjC144rehe5n6DH900lgXmUe86+xCKc10ev56gRKC4/BkHUoG4uSiQgBiIXwDA==, tarball: https://registry.npmjs.org/phin/-/phin-2.9.3.tgz} - deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info. - dev: false - - /phin@3.7.1: - resolution: {integrity: sha512-GEazpTWwTZaEQ9RhL7Nyz0WwqilbqgLahDM3D0hxWwmVDI52nXEybHqiN6/elwpkJBhcuj+WbBu+QfT0uhPGfQ==, tarball: https://registry.npmjs.org/phin/-/phin-3.7.1.tgz} - engines: {node: '>= 8'} - dependencies: - centra: 2.7.0 - transitivePeerDependencies: - - debug - dev: false - /picocolors@0.2.1: resolution: {integrity: sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==, tarball: https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz} dev: false @@ -14092,13 +13808,6 @@ packages: '@napi-rs/nice': 1.0.1 dev: false - /pixelmatch@4.0.2: - resolution: {integrity: sha512-J8B6xqiO37sU/gkcMglv6h5Jbd9xNER7aHzpfRdNmV4IbQBzBpe4l9XmbG+xPF/znacgu2jfEw+wHffaq/YkXA==, tarball: https://registry.npmjs.org/pixelmatch/-/pixelmatch-4.0.2.tgz} - hasBin: true - dependencies: - pngjs: 3.4.0 - dev: false - /plur@4.0.0: resolution: {integrity: sha512-4UGewrYgqDFw9vV6zNV+ADmPAUAfJPKtGvb/VdpQAx25X5f3xXdGdyOEVFwkl8Hl/tl7+xbeHqSEM+D5/TirUg==, tarball: https://registry.npmjs.org/plur/-/plur-4.0.0.tgz} engines: {node: '>=10'} @@ -14111,11 +13820,6 @@ packages: engines: {node: '>=4'} dev: false - /pngjs@3.4.0: - resolution: {integrity: sha512-NCrCHhWmnQklfH4MtJMRjZ2a8c80qXeMlQMv2uVp9ISJMTt562SbGd6n2oq0PaPgKm7Z6pL9E2UlLIhC+SHL3w==, tarball: https://registry.npmjs.org/pngjs/-/pngjs-3.4.0.tgz} - engines: {node: '>=4.0.0'} - dev: false - /point-in-polygon@1.1.0: resolution: {integrity: sha512-3ojrFwjnnw8Q9242TzgXuTD+eKiutbzyslcq1ydfu82Db2y+Ogbmyrkpv0Hgj31qwT3lbS9+QAAO/pIQM35XRw==, tarball: https://registry.npmjs.org/point-in-polygon/-/point-in-polygon-1.1.0.tgz} dev: false @@ -14445,7 +14149,7 @@ packages: dependencies: htmlparser2: 3.10.1 postcss: 7.0.39 - postcss-syntax: 0.36.2(postcss@8.4.38) + postcss-syntax: 0.36.2(postcss@7.0.39) dev: false /postcss-image-set-function@4.0.7(postcss@8.4.38): @@ -14919,6 +14623,30 @@ packages: lodash: 4.17.21 postcss: 8.4.38 + /postcss-syntax@0.36.2(postcss@7.0.39): + resolution: {integrity: sha512-nBRg/i7E3SOHWxF3PpF5WnJM/jQ1YpY9000OaVXlAQj6Zp/kIqJxEDWIZ67tAd7NLuk7zqN4yqe9nc0oNAOs1w==} + peerDependencies: + postcss: '>=5.0.0' + postcss-html: '*' + postcss-jsx: '*' + postcss-less: '*' + postcss-markdown: '*' + postcss-scss: '*' + peerDependenciesMeta: + postcss-html: + optional: true + postcss-jsx: + optional: true + postcss-less: + optional: true + postcss-markdown: + optional: true + postcss-scss: + optional: true + dependencies: + postcss: 7.0.39 + dev: false + /postcss-syntax@0.36.2(postcss@8.4.38): resolution: {integrity: sha512-nBRg/i7E3SOHWxF3PpF5WnJM/jQ1YpY9000OaVXlAQj6Zp/kIqJxEDWIZ67tAd7NLuk7zqN4yqe9nc0oNAOs1w==} peerDependencies: @@ -16839,13 +16567,6 @@ packages: util-deprecate: 1.0.2 dev: false - /readable-web-to-node-stream@3.0.2: - resolution: {integrity: sha512-ePeK6cc1EcKLEhJFt/AebMCLL+GgSKhuygrZ/GLaKZYEecIgIECf4UaUuaByiGtzckwR4ain9VzUh95T1exYGw==, tarball: https://registry.npmjs.org/readable-web-to-node-stream/-/readable-web-to-node-stream-3.0.2.tgz} - engines: {node: '>=8'} - dependencies: - readable-stream: 3.6.2 - dev: false - /readdirp@3.6.0: resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==} engines: {node: '>=8.10.0'} @@ -17354,6 +17075,7 @@ packages: /sax@1.3.0: resolution: {integrity: sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA==, tarball: https://registry.npmjs.org/sax/-/sax-1.3.0.tgz} requiresBuild: true + optional: true /scheduler@0.22.0: resolution: {integrity: sha512-6QAm1BgQI88NPYymgGQLCZgvep4FyePDWFpXVK+zNSUgHwlqpJy8VEh8Et0KxTACS4VWwMousBElAZOH9nkkoQ==, tarball: https://registry.npmjs.org/scheduler/-/scheduler-0.22.0.tgz} @@ -18039,14 +17761,6 @@ packages: resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==} engines: {node: '>=8'} - /strtok3@6.3.0: - resolution: {integrity: sha512-fZtbhtvI9I48xDSywd/somNqgUHl2L2cstmXCCif0itOf96jeW18MBSyrLuNicYQVkvpOxkZtkzujiTJ9LW5Jw==, tarball: https://registry.npmjs.org/strtok3/-/strtok3-6.3.0.tgz} - engines: {node: '>=10'} - dependencies: - '@tokenizer/token': 0.3.0 - peek-readable: 4.1.0 - dev: false - /style-search@0.1.0: resolution: {integrity: sha512-Dj1Okke1C3uKKwQcetra4jSuk0DqbzbYtXipzFlFMZtowbF1x7BKJwB9AayVMyFARvU8EDrZdcax4At/452cAg==} dev: false @@ -18189,7 +17903,7 @@ packages: postcss-sass: 0.4.4 postcss-scss: 2.1.1 postcss-selector-parser: 6.0.16 - postcss-syntax: 0.36.2(postcss@8.4.38) + postcss-syntax: 0.36.2(postcss@7.0.39) postcss-value-parser: 4.2.0 resolve-from: 5.0.0 slash: 3.0.0 @@ -18521,10 +18235,6 @@ packages: next-tick: 1.1.0 dev: false - /timm@1.7.1: - resolution: {integrity: sha512-IjZc9KIotudix8bMaBW6QvMuq64BrJWFs1+4V0lXwWGQZwH+LnX87doAYhem4caOEusRP9/g6jVDQmZ8XOk1nw==, tarball: https://registry.npmjs.org/timm/-/timm-1.7.1.tgz} - dev: false - /tiny-emitter@2.1.0: resolution: {integrity: sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==, tarball: https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz} dev: false @@ -18577,14 +18287,6 @@ packages: engines: {node: '>=0.6'} dev: false - /token-types@4.2.1: - resolution: {integrity: sha512-6udB24Q737UD/SDsKAHI9FCRP7Bqc9D/MQUV02ORQg5iskjtLJlZJNdN4kKtcdtwCeWIwIHDGaUsTsCCAa8sFQ==, tarball: https://registry.npmjs.org/token-types/-/token-types-4.2.1.tgz} - engines: {node: '>=10'} - dependencies: - '@tokenizer/token': 0.3.0 - ieee754: 1.2.1 - dev: false - /totalist@3.0.1: resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==, tarball: https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz} engines: {node: '>=6'} @@ -19083,6 +18785,10 @@ packages: react: 18.2.0 dev: false + /use-strict@1.0.1: + resolution: {integrity: sha512-IeiWvvEXfW5ltKVMkxq6FvNf2LojMKvB2OCeja6+ct24S1XOmQw2dGr2JyndwACWAGJva9B7yPHwAmeA9QCqAQ==, tarball: https://registry.npmjs.org/use-strict/-/use-strict-1.0.1.tgz} + dev: false + /use-sync-external-store@1.2.0(react@18.2.0): resolution: {integrity: sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==} peerDependencies: @@ -19099,12 +18805,6 @@ packages: react: 18.2.0 dev: false - /utif@2.0.1: - resolution: {integrity: sha512-Z/S1fNKCicQTf375lIP9G8Sa1H/phcysstNrrSdZKj1f9g58J4NMgb5IgiEZN9/nLMPDwF0W7hdOe9Qq2IYoLg==, tarball: https://registry.npmjs.org/utif/-/utif-2.0.1.tgz} - dependencies: - pako: 1.0.11 - dev: false - /util-deprecate@1.0.2: resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==} @@ -19195,12 +18895,6 @@ packages: vfile-message: 2.0.4 dev: false - /vibrant@0.0.1: - resolution: {integrity: sha512-qs5u7xmnRdgEJcfPIk/T2FYwkuSZrv3GH4mjxOcEbZWWHtYYlIhF6NeRNcknUQ6q0fFueK9LY0M3xsWXd7M+eQ==, tarball: https://registry.npmjs.org/vibrant/-/vibrant-0.0.1.tgz} - dependencies: - through: 2.3.8 - dev: false - /vite@4.5.2(less@4.1.3): resolution: {integrity: sha512-tBCZBNSBbHQkaGyhGCDUGqeo2ph8Fstyp6FMSvTtsXeZSPpSMGlviAOav2hxVTqFcx8Hj/twtWKsMJXNY0xI8w==, tarball: https://registry.npmjs.org/vite/-/vite-4.5.2.tgz} engines: {node: ^14.18.0 || >=16.0.0} @@ -19554,37 +19248,11 @@ packages: optional: true dev: true - /xhr@2.6.0: - resolution: {integrity: sha512-/eCGLb5rxjx5e3mF1A7s+pLlR6CGyqWN91fv1JgER5mVWg1MZmlhBvy9kjcsOdRk8RrIujotWyJamfyrp+WIcA==, tarball: https://registry.npmjs.org/xhr/-/xhr-2.6.0.tgz} - dependencies: - global: 4.4.0 - is-function: 1.0.2 - parse-headers: 2.0.5 - xtend: 4.0.2 - dev: false - - /xml-parse-from-string@1.0.1: - resolution: {integrity: sha512-ErcKwJTF54uRzzNMXq2X5sMIy88zJvfN2DmdoQvy7PAFJ+tPRU6ydWuOKNMyfmOjdyBQTFREi60s0Y0SyI0G0g==, tarball: https://registry.npmjs.org/xml-parse-from-string/-/xml-parse-from-string-1.0.1.tgz} - dev: false - - /xml2js@0.5.0: - resolution: {integrity: sha512-drPFnkQJik/O+uPKpqSgr22mpuFHqKdbS835iAQrUC73L2F5WkboIRd63ai/2Yg6I1jzifPFKH2NTK+cfglkIA==, tarball: https://registry.npmjs.org/xml2js/-/xml2js-0.5.0.tgz} - engines: {node: '>=4.0.0'} - dependencies: - sax: 1.3.0 - xmlbuilder: 11.0.1 - dev: false - /xmlbuilder@10.1.1: resolution: {integrity: sha512-OyzrcFLL/nb6fMGHbiRDuPup9ljBycsdCypwuyg5AAHvyWzGfChJpCXMG88AGTIMFhGZ9RccFN1e6lhg3hkwKg==, tarball: https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-10.1.1.tgz} engines: {node: '>=4.0'} dev: false - /xmlbuilder@11.0.1: - resolution: {integrity: sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA==, tarball: https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-11.0.1.tgz} - engines: {node: '>=4.0'} - dev: false - /xtend@2.1.2: resolution: {integrity: sha512-vMNKzr2rHP9Dp/e1NQFnLQlwlhp9L/LfvnsVdHxN1f+uggyVI3i08uD14GPvCToPkdsRfyPqIyYGmIk58V98ZQ==} engines: {node: '>=0.4'} @@ -19682,3 +19350,11 @@ packages: engines: {node: '>=0.8'} hasBin: true dev: false + + github.com/zhuker/lamejs/582bbba6a12f981b984d8fb9e1874499fed85675: + resolution: {tarball: https://codeload.github.com/zhuker/lamejs/tar.gz/582bbba6a12f981b984d8fb9e1874499fed85675} + name: lamejs + version: 1.2.1 + dependencies: + use-strict: 1.0.1 + dev: false diff --git a/src/pages/playground/components/audio-input.tsx b/src/pages/playground/components/audio-input.tsx index 63bd8d67..6ef53484 100644 --- a/src/pages/playground/components/audio-input.tsx +++ b/src/pages/playground/components/audio-input.tsx @@ -1,9 +1,9 @@ import { externalRefer } from '@/constants/external-links'; import { AudioOutlined } from '@ant-design/icons'; -import { FFmpeg } from '@ffmpeg/ffmpeg'; import { useIntl } from '@umijs/max'; import { Button, Space, Tooltip } from 'antd'; import dayjs from 'dayjs'; +import lamejs from 'lamejs'; import React, { useCallback, useEffect, @@ -60,7 +60,11 @@ const AudioInput: React.FC = (props) => { const analyser = useRef(null); const dataArray = useRef(null); const audioUrl = useRef(''); - const ffmpeg = useRef(null); + const scriptProcessor = useRef(null); + const mp3Encoder = useRef(null); + const mp3Data = useRef(null); + const mediaStreamSource = useRef(null); + const sampleRate = 44100; // mp3 const initAudioContext = useCallback(() => { audioContext.current = new (window.AudioContext || @@ -69,14 +73,40 @@ const AudioInput: React.FC = (props) => { analyser.current = audioContext.current.createAnalyser(); analyser.current.fftSize = 512; dataArray.current = new Uint8Array(analyser.current.frequencyBinCount); - console.log('audioContext:', audioContext.current, analyser.current); }, []); const generateVisualData = useCallback(() => { - const source = audioContext.current.createMediaStreamSource( + mediaStreamSource.current = audioContext.current.createMediaStreamSource( audioStream.current ); - source.connect(analyser.current); + mediaStreamSource.current.connect(analyser.current); + }, []); + + const initMp3Converter = useCallback(() => { + scriptProcessor.current = audioContext.current.createScriptProcessor( + 4096, + 1, + 1 + ); + + mp3Encoder.current = new lamejs.Mp3Encoder(1, sampleRate, 128); + mp3Data.current = []; + + scriptProcessor.current.onaudioprocess = (event: any) => { + const pcmData = event.inputBuffer.getChannelData(0); + const samples = new Int16Array(pcmData.length); + + for (let i = 0; i < pcmData.length; i++) { + samples[i] = Math.max(-1, Math.min(1, pcmData[i])) * 32767; + } + const mp3Chunk = mp3Encoder.current.encodeBuffer(samples); + if (mp3Chunk.length > 0) { + mp3Data.current.push(mp3Chunk); + } + }; + + mediaStreamSource.current.connect(scriptProcessor.current); + scriptProcessor.current.connect(audioContext.current.destination); }, []); // stop all audio tracks @@ -84,12 +114,15 @@ const AudioInput: React.FC = (props) => { audioStream.current?.getTracks().forEach((track: any) => { track.stop(); }); + scriptProcessor.current.disconnect(); + mediaStreamSource.current.disconnect(); + audioContext.current.close(); }; const handleStopRecording = () => { setIsRecording(false); audioRecorder.current?.stop(); - // props.onRecord?.(false); + stopAudioTracks(); }; const getAudioFormat = (type?: string) => { @@ -108,36 +141,14 @@ const AudioInput: React.FC = (props) => { return resultFormat; }; - const convertAudioBlob2Mp3 = useCallback( - async (audioBlob: any, mimeType: string): Promise => { - try { - if (!ffmpeg.current.loaded) { - await ffmpeg.current.load(); - } - const format = getAudioFormat(mimeType); - const recordFile = new Uint8Array(await audioBlob.arrayBuffer()); - - await ffmpeg.current.writeFile(`input${format.suffix}`, recordFile); - - await ffmpeg.current.exec([ - '-i', - `input${format.suffix}`, - '-f', - 'mp3', - 'output.mp3' - ]); - - const mp3Data = await ffmpeg.current.readFile('output.mp3'); - - const mp3Blob = new Blob([mp3Data.buffer], { type: 'audio/mpeg' }); - - return mp3Blob; - } catch (error) { - return new Blob(); - } - }, - [] - ); + const generateMp3Data = useCallback(() => { + const finalChunk = mp3Encoder.current.flush(); + if (finalChunk.length > 0) { + mp3Data.current.push(finalChunk); + } + const mp3Blob = new Blob(mp3Data.current, { type: 'audio/mpeg' }); + return mp3Blob; + }, []); // get all audio tracks const getAudioTracks = () => { @@ -172,7 +183,6 @@ const AudioInput: React.FC = (props) => { const permissionStatus = await navigator.permissions.query({ name: 'microphone' as any }); - console.log('permissionStatus:', permissionStatus); if (permissionStatus.state === 'granted') { setAudioPermission(true); props.onAudioPermission(true); @@ -201,6 +211,8 @@ const AudioInput: React.FC = (props) => { setAudioOn(true); setAudioPermission(true); initAudioContext(); + generateVisualData(); + initMp3Converter(); } catch (error) { console.log('enable+++++++++', error); } @@ -226,7 +238,6 @@ const AudioInput: React.FC = (props) => { const generateFileNameByTime = (type?: string) => { const format = getAudioFormat(type); - // format: recording-YYYY-MM-DD-HH_mm_ss.wav return `recording-${dayjs().format('YYYY-MM-DD-HH_mm_ss')}${format.suffix}`; }; // start recording @@ -243,32 +254,19 @@ const AudioInput: React.FC = (props) => { audioRecorder.current = new MediaRecorder(audioStream.current); - console.log('audioRecorder:', audioRecorder.current); - - const audioChunks: any[] = []; - audioRecorder.current.ondataavailable = (event: any) => { - audioChunks.push(event.data); if (props.voiceActivity) { analyser.current?.getByteFrequencyData(dataArray.current); - props.onAnalyse?.(dataArray.current, analyser); } }; // stop recording audioRecorder.current.onstop = async () => { - const audioBlob = new Blob(audioChunks, { - type: audioRecorder.current.mimeType - }); - - // convert audio blob to mp3 - const mp3Blob = await convertAudioBlob2Mp3( - audioBlob, - audioRecorder.current.mimeType - ); + handleStopRecording(); + props.onAnalyse?.([], null); - console.log('mp3Blob:', mp3Blob, audioBlob); + const mp3Blob = generateMp3Data(); audioUrl.current = mp3Blob.size ? URL.createObjectURL(mp3Blob) : ''; @@ -280,16 +278,12 @@ const AudioInput: React.FC = (props) => { name: generateFileNameByTime(mp3Blob.type), duration: Math.floor((Date.now() - startTime.current) / 1000) }); - - props.onAnalyse?.([], null); }; setIsRecording(true); props.onRecord?.(true); startTime.current = Date.now(); audioRecorder.current.start(100); - generateVisualData(); - console.log('start recording'); } catch (error) { console.log('error====', error); } @@ -345,14 +339,6 @@ const AudioInput: React.FC = (props) => { checkMicrophonePermission(); }, []); - useEffect(() => { - ffmpeg.current = new FFmpeg(); - ffmpeg.current.load?.(); - return () => { - ffmpeg.current = null; - }; - }, []); - return (
diff --git a/src/pages/playground/components/ground-stt.tsx b/src/pages/playground/components/ground-stt.tsx index acb17d64..1327825b 100644 --- a/src/pages/playground/components/ground-stt.tsx +++ b/src/pages/playground/components/ground-stt.tsx @@ -192,7 +192,6 @@ const GroundLeft: React.FC = forwardRef((props, ref) => { duration: number; type: string; }) => { - console.log('handleOnAudioData===========', data); setAudioData(() => { return { url: data.url, @@ -232,7 +231,6 @@ const GroundLeft: React.FC = forwardRef((props, ref) => { setAudioData(null); setTokenResult(null); setMessageList([]); - console.log('handleOnRecord============', val); }, []); const handleOnGenerate = async () => { diff --git a/typings.d.ts b/typings.d.ts index 8f91f378..cf0a9e51 100644 --- a/typings.d.ts +++ b/typings.d.ts @@ -24,5 +24,6 @@ declare module 'sortablejs'; declare module 'colorthief'; declare module 'vibrant'; declare module 'node-vibrant'; +declare module 'lamejs'; declare const REACT_APP_ENV: 'test' | 'dev' | 'pre' | false;