jiwenjiang / react-audio-analyser Goto Github PK

import React, {Component} from "react";
import "./index.css";
import AudioAnalyser from "react-audio-analyser"


export default class demo extends Component {
    constructor(props) {
        super(props)
        this.state = {
            status: ""
        }
    }

    componentDidMount() {
    }

    controlAudio(status) {
        this.setState({
            status
        })
    }

    changeScheme(e) {
        this.setState({
            audioType: e.target.value
        })
    }

    render() {
        const {status, audioSrc, audioType} = this.state;
        const audioProps = {
            audioType,
            // audioOptions: {sampleRate: 30000}, // 设置输出音频采样率
            status,
            audioSrc,
            timeslice: 1000, // timeslice（https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/start#Parameters）
            startCallback: (e) => {
                console.log("succ start", e)
            },
            pauseCallback: (e) => {
                console.log("succ pause", e)
            },
            stopCallback: (e) => {
                this.setState({
                    audioSrc: window.URL.createObjectURL(e)
                })
                console.log("succ stop", e)
            },
            onRecordCallback: (e) => {
                console.log("recording", e)
            },
            errorCallback: (err) => {
                console.log("error", err)
            }
        }
        return (
            <div>
                <AudioAnalyser {...audioProps}>
                    <div className="btn-box">
                        {status !== "recording" &&
                        <i className="iconfont icon-start" title="开始"
                           onClick={() => this.controlAudio("recording")}></i>}
                        {status === "recording" &&
                        <i className="iconfont icon-pause" title="暂停"
                           onClick={() => this.controlAudio("paused")}></i>}
                        <i className="iconfont icon-stop" title="停止"
                           onClick={() => this.controlAudio("inactive")}></i>
                    </div>
                </AudioAnalyser>
                <p>choose output type</p>
                <select name="" id="" onChange={(e) => this.changeScheme(e)} value={audioType}>
                    <option value="audio/webm">audio/webm（default, safari does not support ）</option>
                    <option value="audio/wav">audio/wav</option>
                    <option value="audio/mp3">audio/mp3</option>
                    <option value="audio/mp4">audio/mp4</option>
                </select>
            </div>
        );
    }
}

Properties(audioProps)

Properties	Description	Default	IsRequired
`status`	`recording` start , `paused` pause , `inactive` stop	undefined	yes
`audioType`	audio output type	audio/webm(audio/mp4 in safari)	no
`timeslice`	The number of milliseconds to record into each Blob	undefined	no
`audioSrc`	window.URL.createObjectURL of output audio blob ,when the prop set, showing the audio control list	null	no
`startCallback`	Function triggered after starting(resuming) recording	undefined	no
`pauseCallback`	Function triggered after pausing recording	undefined	no
`stopCallback`	Function triggered after stoping recording	undefined	no
`onRecordCallback`	Function triggered after setting timeslice or stoping recording	undefined	no
`errorCallback`	Function triggered after error	undefined	no
`backgroundColor`	audio canvas backgroundColor	rgba(0, 0, 0, 1)	no
`strokeColor`	audio canvas strokeColor	#ffffff	no
`className`	audio canvas css classname	audioContainer	no
`audioBitsPerSecond`	audioBitsPerSecond	128000	no
`width`	audio canvas width	500px	no
`height`	audio canvas height	100px	no
`audioOptions`	output audio/wav options	{}	no
`audioOptions.sampleRate`	output audio/wav sampleRate		no

License

MIT

TODO

output audio/mp3 (completed)
support safari (completed)
Diverse audio curve display

react-audio-analyser's People

Contributors

Stargazers

Watchers

react-audio-analyser's Issues

Cannot record on IOS

Hi, due to IOS updates the package is not working now.
On android everything is fine, but on IOS the recorder is not working (including the package demo)

recording red dot icon is remain same on browser tab after i stop recording .

If i stop recording the red dot icon should not be there on browser tab it should be removed .

you can check this in attached link .

https://codesandbox.io/s/record-audio-and-download-wav-or-mp3-react-audio-analyser-x5653

您好，请问怎么设置单双声道呢？默认就是单声道？另外采样率可以是16000吗，我设置了录出来不正确。

谢谢！

Migrate from Class to React Hooks Functional Component

Hi @jiwenjiang,

Hope all is well!
Can this component be rewritten in React Hooks?

Was wondering if the example provided can be rewritten in hooks..

Thank you for your time!

加上了您注释的采样率，录音后播放没声音了。

// audioOptions: {sampleRate: 30000}, // 设置输出音频采样率  把注释的这个打开就可以还原问题了。  而且 把30000改成3000 不仅没有声音，时间还长了很多。请大神看看 。谢谢

当页面上同时有多个AudioAnalyser组件时，波只会显示在其中一个组件上。

页面上同时有两个AudioAnalyser组件，使用左边的组件，但波显示在了右边的组件上。

The AudioContext was not allowed to start.

The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page.

请问这个问题怎么解决？

react antd 下运行报错

按照readME 里面的做法
npm install react-audio-analyser --save
拷贝demo
运行npm run start 出现上图的错误。这是怎么回事？

完整的demo代码：
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import { DatePicker } from 'antd';

import AudioAnalyser from "react-audio-analyser";

export default class Demo extends Component {
constructor(props) {
super(props)
this.state = {
status: null
}
}

controlAudio(status) {
    this.setState({
        status
    })
}

render() {
    const {status, audioSrc} = this.state;
    const audioProps = {
        audioType: "audio/wav", // supported audio/wav,audio/mp3, default audio/webm
        status, // Triggering component updates by changing status
        audioSrc,
        startCallback: (e) => {
            console.log("succ start", e)
        },
        pauseCallback: (e) => {
            console.log("succ pause", e)
        },
        stopCallback: (e) => {
            this.setState({
                audioSrc: window.URL.createObjectURL(e)
            })
            console.log("succ stop", e)
        }
    }
    return (
        <AudioAnalyser {...audioProps}>
            <div className="btn-box">
                {status !== "recording" &&
                <i className="iconfont icon-start" title="开始"
                   onClick={() => this.controlAudio("recording")}></i>}
                {status === "recording" &&
                <i className="iconfont icon-pause" title="暂停"
                   onClick={() => this.controlAudio("paused")}></i>}
                <i className="iconfont icon-stop" title="停止"
                   onClick={() => this.controlAudio("inactive")}></i>
            </div>
        </AudioAnalyser>
    );
}

}

function App() {
return (
<div style={{ margin: 100 }}>

AntDesign Demo

);
}

ReactDOM.render(, document.getElementById('root'));

Need blob during audio recording

Is there any way to get the blob of audio data being recorded?

获取的音频分段问题

你好，现在的录音是基于两个按钮，《开始》《停止》来结束一段录音的，我们现在想实现一种类似长连接的方式的录音，即点击开始录音（有点像打开录音模式），保持录音状态，说一句，过了一会，又说一句，过了一会又说一句，能不能分别获取第一句，第二句，第三句的内容，即监测某句话是否说完了然后分别只发送这一句话的流内容呢？

Still WaveForm Canvas after pressing Stop

After I press stop the canvas returns back to default .
Can the canvas view the recorded audio wave form ?
and how ?

您好，我想计算audio的时间，有获取audio对象的方法吗

Error when install on a next project

Any ideas why i get this error ?

thanks

Client pings, but there's no entry for page: /_error
/App_Next_reactStrapV2/node_modules/react-audio-analyser/lib/index.js:4
import AudioAnalyser from './AudioAnalyser';
^^^^^^^^^^^^^

SyntaxError: Unexpected identifier
at new Script (vm.js:80:7)
at createScript (vm.js:274:10)
at Object.runInThisContext (vm.js:326:10)

Issue with import ./AudioAnalyser

I face this issue when testing. A similar Issue was mentioned in closed issues, but there was no answer. Apparently, the issue is from importing the AudioAnalyser component outside any module at https://github.com/jiwenjiang/react-audio-analyser/blob/master/lib/index.js line 4.

`C:\Users...\node_modules\react-audio-analyser\lib\index.js:4
import AudioAnalyser from './AudioAnalyser';
^^^^^^

SyntaxError: Cannot use import statement outside a module
at compileFunction ()
at wrapSafe (internal/modules/cjs/loader.js:931:16)
at Module._compile (internal/modules/cjs/loader.js:979:27)
at Module._compile (C:\Users...\node_modules\pirates\lib\index.js:99:24)
at Module._extensions..js (internal/modules/cjs/loader.js:1035:10)
at Object.newLoader [as .js] (C:...\node_modules\pirates\lib\index.js:104:7)`

jiwenjiang / react-audio-analyser Goto Github PK

react-audio-analyser's Introduction

react-audio-analyser

Demo

Installation

Features

Example

Properties(audioProps)

License

TODO

react-audio-analyser's People

Contributors

Stargazers

Watchers

Forkers

react-audio-analyser's Issues

AntDesign Demo

Recommend Projects

Recommend Topics

Recommend Org