Hi, i usually build apps with angular, it is the first time i use react. I wanted to create an app that convert our voice to speech synthesis audio. I was using webspeech API for this and it works fine on android browser or chrome android, also on desktop. But it doesn’t work properly on IOS devices, especially on chrome IOS. Does speechkit on Ionic can be use on web?
What have you tried? What does the code look like?
The code look like this
function SpeechRecognition() {
const [lang, setLang] = useState("en-US");
const [value, setValue] = useState("");
const [blocked, setBlocked] = useState(false);
const onEnd = () => {
// You could do something here after listening has finished
};
const onResult = (result) => {
setValue(result);
};
const changeLang = (event) => {
setLang(event.target.value);
};
const onError = (event) => {
if (event.error === "not-allowed") {
setBlocked(true);
}
};
const SpeechRecognition = useSpeechRecognition || window.webkitSpeechRecognition || null;
const { listen, listening, stop, supported } = SpeechRecognition({
onResult,
onEnd,
onError,
});
const toggle = listening
? stop
: () => {
setBlocked(false);
listen({ lang });
};
return (
<Container>
<form id="speech-recognition-form">
<h2>Bory Speech Recognition</h2>
{!supported && (
<p>
Oh no, it looks like your browser doesn't support Speech
Recognition.
</p>
)}
{supported && (
<React.Fragment>
<p>Click Microphone to start listening, and click again to stop</p>
<label htmlFor="language">Language</label>
<select
form="speech-recognition-form"
id="language"
value={lang}
onChange={changeLang}
>
{languageOptions.map((option) => (
<option key={option.value} value={option.value}>
{option.label}
</option>
))}
</select>
<label htmlFor="transcript">Transcript</label>
<textarea
id="transcript"
name="transcript"
placeholder="Waiting to take notes ..."
value={value}
rows={3}
disabled
/>
<button disabled={blocked} type="button" onClick={toggle}>
{listening ? (
<FontAwesomeIcon icon={faMicrophoneSlash} />
) : (
<FontAwesomeIcon icon={faMicrophone} />
)}
</button>
{blocked && (
<p style={{ color: "red" }}>
The microphone is blocked for this site in your browser.
</p>
)}
</React.Fragment>
)}
</form>
</Container>
);
}
im using this module GitHub - MikeyParton/react-speech-kit: React hooks for Speech Recognition and Speech Synthesis. My question is can ionic SpeechKit work on browser?