{"id":19435924,"url":"https://github.com/jiwenjiang/react-audio-analyser","last_synced_at":"2025-04-08T04:18:59.896Z","repository":{"id":32915376,"uuid":"143152498","full_name":"jiwenjiang/react-audio-analyser","owner":"jiwenjiang","description":"基于react录音及绘制音频曲线","archived":false,"fork":false,"pushed_at":"2022-12-08T20:58:54.000Z","size":1394,"stargazers_count":86,"open_issues_count":5,"forks_count":29,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-24T08:43:33.387Z","etag":null,"topics":["audio","audio-analyser","audio-recorder","react","react-audio","react-recorder","recorder"],"latest_commit_sha":null,"homepage":"https://segmentfault.com/a/1190000016152729","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jiwenjiang.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-08-01T12:22:52.000Z","updated_at":"2024-09-15T02:32:29.000Z","dependencies_parsed_at":"2023-01-14T22:45:50.685Z","dependency_job_id":null,"html_url":"https://github.com/jiwenjiang/react-audio-analyser","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jiwenjiang%2Freact-audio-analyser","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jiwenjiang%2Freact-audio-analyser/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jiwenjiang%2Freact-audio-analyser/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jiwenjiang%2Freact-audio-analyser/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jiwenjiang","download_url":"https://codeload.github.com/jiwenjiang/react-audio-analyser/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247773726,"owners_count":20993639,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["audio","audio-analyser","audio-recorder","react","react-audio","react-recorder","recorder"],"created_at":"2024-11-10T15:08:27.483Z","updated_at":"2025-04-08T04:18:59.867Z","avatar_url":"https://github.com/jiwenjiang.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"English | [简体中文](./README_zh-CN.md)\n# react-audio-analyser\n\n\n[![GitHub](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/jiwenjiang/react-audio-analyser)\n\n\nrecording audio and drawing the curve. support for converting the audio to wav.\n\n## Demo\n\nCheck out the [demo](https://jiwenjiang.github.io/).\n\n## Installation\n\n`npm install react-audio-analyser --save`\n\n## Features\n\n- Record audio and show the curve\n- Support output audio/wav,audio/mp3,audio/webm\n- Various state callbacks\n- Support the introduction of multiple components([reference](https://github.com/jiwenjiang/react-audio-analyser/blob/master/src/demo/mixAudio.js))\n\n## Example\n\n\n\n```js\n\nimport React, {Component} from \"react\";\nimport \"./index.css\";\nimport AudioAnalyser from \"react-audio-analyser\"\n\n\nexport default class demo extends Component {\n    constructor(props) {\n        super(props)\n        this.state = {\n            status: \"\"\n        }\n    }\n\n    componentDidMount() {\n    }\n\n    controlAudio(status) {\n        this.setState({\n            status\n        })\n    }\n\n    changeScheme(e) {\n        this.setState({\n            audioType: e.target.value\n        })\n    }\n\n    render() {\n        const {status, audioSrc, audioType} = this.state;\n        const audioProps = {\n            audioType,\n            // audioOptions: {sampleRate: 30000}, // 设置输出音频采样率\n            status,\n            audioSrc,\n            timeslice: 1000, // timeslice（https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/start#Parameters）\n            startCallback: (e) =\u003e {\n                console.log(\"succ start\", e)\n            },\n            pauseCallback: (e) =\u003e {\n                console.log(\"succ pause\", e)\n            },\n            stopCallback: (e) =\u003e {\n                this.setState({\n                    audioSrc: window.URL.createObjectURL(e)\n                })\n                console.log(\"succ stop\", e)\n            },\n            onRecordCallback: (e) =\u003e {\n                console.log(\"recording\", e)\n            },\n            errorCallback: (err) =\u003e {\n                console.log(\"error\", err)\n            }\n        }\n        return (\n            \u003cdiv\u003e\n                \u003cAudioAnalyser {...audioProps}\u003e\n                    \u003cdiv className=\"btn-box\"\u003e\n                        {status !== \"recording\" \u0026\u0026\n                        \u003ci className=\"iconfont icon-start\" title=\"开始\"\n                           onClick={() =\u003e this.controlAudio(\"recording\")}\u003e\u003c/i\u003e}\n                        {status === \"recording\" \u0026\u0026\n                        \u003ci className=\"iconfont icon-pause\" title=\"暂停\"\n                           onClick={() =\u003e this.controlAudio(\"paused\")}\u003e\u003c/i\u003e}\n                        \u003ci className=\"iconfont icon-stop\" title=\"停止\"\n                           onClick={() =\u003e this.controlAudio(\"inactive\")}\u003e\u003c/i\u003e\n                    \u003c/div\u003e\n                \u003c/AudioAnalyser\u003e\n                \u003cp\u003echoose output type\u003c/p\u003e\n                \u003cselect name=\"\" id=\"\" onChange={(e) =\u003e this.changeScheme(e)} value={audioType}\u003e\n                    \u003coption value=\"audio/webm\"\u003eaudio/webm（default, safari does not support ）\u003c/option\u003e\n                    \u003coption value=\"audio/wav\"\u003eaudio/wav\u003c/option\u003e\n                    \u003coption value=\"audio/mp3\"\u003eaudio/mp3\u003c/option\u003e\n                    \u003coption value=\"audio/mp4\"\u003eaudio/mp4\u003c/option\u003e\n                \u003c/select\u003e\n            \u003c/div\u003e\n        );\n    }\n}\n\n```\n## Properties(audioProps)\n\nProperties   | Description                                          | Default               |IsRequired\n-------------|------------------------------------------------------|-------------------------|------------\n`status`     | `recording` start , `paused` pause , `inactive` stop | undefined               | yes\n`audioType`       | audio output type      | audio/webm(audio/mp4 in safari) | no\n`timeslice`       | The number of milliseconds to record into each Blob      | undefined | no\n`audioSrc`     | window.URL.createObjectURL of output audio blob ,when the prop set, showing the audio control list    | null    | no                  |\n`startCallback`     | Function triggered after starting(resuming) recording     |   undefined                 | no\n`pauseCallback`     | Function triggered after pausing recording       |   undefined                 | no\n`stopCallback`     | Function triggered after stoping recording       |   undefined                 | no\n`onRecordCallback`     | Function triggered after setting timeslice or stoping recording       |   undefined                 | no\n`errorCallback`     | Function triggered after error       |   undefined                 | no\n`backgroundColor`   | audio canvas backgroundColor       |   rgba(0, 0, 0, 1)                 | no\n`strokeColor`   | audio canvas strokeColor       |  #ffffff                | no\n`className`   | audio canvas css classname       |  audioContainer                | no\n`audioBitsPerSecond`   | audioBitsPerSecond       |  128000                | no\n`width`   | audio canvas width       |  500px                | no\n`height`   | audio canvas height       |  100px                | no\n`audioOptions`   | output audio/wav options       |  {}              | no\n`audioOptions.sampleRate`   | output audio/wav sampleRate       |              | no\n\n\n## License\n\nMIT\n\n## TODO\n- output audio/mp3 (completed)\n- support safari (completed)\n- Diverse audio curve display\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjiwenjiang%2Freact-audio-analyser","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjiwenjiang%2Freact-audio-analyser","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjiwenjiang%2Freact-audio-analyser/lists"}