react record voice
import React, { useState, useEffect } from 'react';
// the button form material-ui is optional
// npm install @material-ui/core
import Button from '@material-ui/core/Button';
const SpeechRecognition =
window.SpeechRecognition || window.webkitSpeechRecognition
const mic = new SpeechRecognition()
mic.continuous = true
mic.interimResults = true
mic.lang = 'en-US'
const RecordButton = () => {
const [isMicOn, setIsMicOn] = useState(false);
var buttonColour;
var buttonLabel;
if (isMicOn) {
buttonColour = "secondary";
buttonLabel = "Recording...";
} else {
buttonColour = "primary";
buttonLabel = "Record";
}
useEffect(() => {
handleListen()
}, [isMicOn])
const handleListen = () => {
if (isMicOn) {
mic.start()
mic.onend = () => {
console.log('continue..')
mic.start()
}
} else {
mic.stop()
mic.onend = () => {
console.log('Stopped Mic on Click')
}
}
mic.onstart = () => {
console.log('Mics on')
}
mic.onresult = event => {
const transcript = Array.from(event.results)
.map(result => result[0])
.map(result => result.transcript)
.join('')
console.log(transcript)
mic.onerror = event => {
console.log(event.error)
}
}
}
// if you don't want to us the button from Material-ui, just change Button to button
return(
<Button variant="contained" color={buttonColour} onClick={() => {setIsMicOn(!isMicOn)}} >{buttonLabel}</Button>
)
}
export default RecordButton;
Are there any code examples left?
New code examples in category Javascript
-
Javascript 2023-04-21 22:52:36
-
Javascript 2022-03-27 22:25:20 javascript download string as file
-
Javascript 2022-03-27 21:40:22 sort numbers in array javascript
-
Javascript 2022-03-27 21:20:04 compare two arrays and return the difference javascript
-
Javascript 2022-03-27 21:15:02 javascript regex french phone number
-
Javascript 2022-03-27 21:05:03 cypress custom error message
-
Javascript 2022-03-27 21:00:05 create element javascript with id
-
Javascript 2022-03-27 20:40:57 feather icons react
-
Javascript 2022-03-27 20:20:01 how to make graphql request in axios
-
Javascript 2022-03-27 20:15:07 bootstrap validator password and confirm password