Effective Voice Visualizer For React

A powered voice visualizer collection that supplies a straightforward means to record, imagine, as well as adjust voice information for usages like voice acknowledgment, noise evaluation, as well as a lot more. Powered by Internet Sound API

Produce for React, this collection take advantage of the power of the Internet Sound API, supplying a collection of performances from audio recording to real-time visualization.

Exactly how to utilize it:

1. Mount as well as import the essential hook as well as element from the collection

 # Thread

.$ thread react-voice-visualizer

.

.
# NPM 
. $ npm i react-voice-visualizer 

 import {useEffect}
from" respond"; 
. import {useVoiceVisualizer, VoiceVisualizer} from" react-voice-visualizer";

2. Fundamental use. (* )> const Application=( )
= > { .// Boot up the recorder manages making use of the hook . const recorderControls =useVoiceVisualizer(); . const {
. // … (Drawn out controls as well as states, if essential) .
recordedBlob
, . mistake, .
audioRef, .}
=> recorderControls;
.// Obtain the taped sound ball
. useEffect(()= > { .
if (! recordedBlob )return;
. console.log( recordedBlob);
.}
,

)
;

.// Obtain the mistake when it happens 
.
 {
. if(! mistake) return; 
. console.log (mistake); 
.},>
(
*)
)
;

. return( 
. < VoiceVisualizer manages= {recorderControls} ref= {audioRef} 
/ > 
.); 
.}; 
. export default Application;[recordedBlob, error] 3. Or pack any kind of existing reconding information.
(* )useEffect(()= > {
.// Establish the preloaded audioBlob when the element places 
.// Presuming 'audioBlob' is specified someplace 
.
if( audioBlob) {
.
setPreloadedAudioBlob( audioBlob);

.} 
.},[error]);

4. Readily available element props.

 controls: {
// audio recording
controls as well as states 
. audioData,

.
isRecordingInProgress,

.
recordedBlob, 
. period,

. audioSrc, 
. currentAudioTime,

. bufferFromRecordedBlob,

. togglePauseResume,

. startRecording,

. stopRecording,

. saveAudioFile,

. recordingTime, 
. isPausedRecordedAudio,

. isPausedRecording,

. isProcessingRecordedAudio, 
. isCleared,

.
clearCanvas,

. _ handleTimeUpdate,

.
},

.
size="100 %"
,

. elevation = 200,

. rate = 3, 
. backgroundColor="clear",

.
mainBarColor =" #FFFFFF",

. secondaryBarColor=" # 5e5e5e", 
. barWidth = 2,

. space= 1, 
. rounded = 5,

. isControlPanelShown = real,

. isDownloadAudioButtonShown = incorrect
,

. animateCurrentPick = real,

. fullscreen = real,

. onlyRecording = incorrect,

. isDefaultUIShown= incorrect, 
. defaultMicrophoneIconColor = mainBarColor,

. defaultAudioWaveIconColor= mainBarColor, 
. canvasContainerClassName,

. isProgressIndicatorShown=! onlyRecording, 
. progressIndicatorClassName, 
. isProgressIndicatorTimeShown= real, 
. progressIndicatorTimeClassName, 
. isProgressIndicatorOnHoverShown=! onlyRecording, 
. progressIndicatorOnHoverClassName, 
. isProgressIndicatorTimeOnHoverShown= real, 
. progressIndicatorTimeOnHoverClassName, 
. isAudioProcessingTextShown= real, 
. audioProcessingTextClassName,

. controlButtonsClassName,
(
*) Sneak Peek:[audioBlob] Download And Install Information: 

Writer

: YZarytskyi

Real-time Trial

:

Sight The Trial Download And Install Web Link

: Download And Install The Resource Code Authorities Internet Site

: https://github.com/YZarytskyi/react-voice-visualizer Certificate

: MIT