jiwenjiang / react-audio-analyser Goto Github PK
View Code? Open in Web Editor NEW基于react录音及绘制音频曲线
Home Page: https://segmentfault.com/a/1190000016152729
License: MIT License
基于react录音及绘制音频曲线
Home Page: https://segmentfault.com/a/1190000016152729
License: MIT License
您好,请问怎么设置单双声道呢?默认就是单声道?另外采样率可以是16000吗,我设置了录出来不正确。
谢谢!
大神打算什么时候支持一下safari吗
在一次录音完成之后,开始下一次录音的时候,音频波没有正常的波动
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)
Is there any way to get the blob of audio data being recorded?
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)
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!
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)`
按照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 }}>
ReactDOM.render(, document.getElementById('root'));
// audioOptions: {sampleRate: 30000}, // 设置输出音频采样率 把注释的这个打开就可以还原问题了。 而且 把30000改成3000 不仅没有声音,时间还长了很多。请大神看看 。谢谢
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
大神你好,想问下,如何在录制的过程中同时获取已经录制的时长秒数呢?
After I press stop the canvas returns back to default .
Can the canvas view the recorded audio wave form ?
and how ?
手机上录音报错啊
你好,现在的录音是基于两个按钮,《开始》《停止》来结束一段录音的,我们现在想实现一种类似长连接的方式的录音,即点击开始录音(有点像打开录音模式),保持录音状态,说一句,过了一会,又说一句,过了一会又说一句,能不能分别获取第一句,第二句,第三句的内容,即监测某句话是否说完了然后分别只发送这一句话的流内容呢?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.