i changed something to be interactive with button to play sound but it is still not wokring This is my problem which does not really tell me anything "App.js:18 SpeechSynthesisUtterance.onerror synthesis-failed" this is my following code in react js
import logo from './logo.svg';
import './App.css';
function App() {
const synth = window.speechSynthesis;
function speak(event) {
if (synth.speaking) {
console.error("speechSynthesis.speaking");
return;
}
const utterThis = new SpeechSynthesisUtterance("Hello World");
utterThis.onend = function (event) {
console.log("SpeechSynthesisUtterance.onend",event.error);
};
utterThis.onerror = function (event) {
console.error("SpeechSynthesisUtterance.onerror",event.error);
};
utterThis.pitch = 1.5;
utterThis.rate = 1.5;
synth.speak(utterThis);
}
const letsgo= event => {
event.preventDefault();
speak(event);
}
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
<div>
<form onSubmit={letsgo}>
<div className="controls">
<button id="play" type="submit">Play</button>
</div>
</form>
</div>
</div>
);
}
export default App;
I am using chrome on my mac. I can ear the sound from other browsers. I have compile my react js with
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
I am not sure about the issue with my chrome engine. Please help me.
I also shut down my firewall and My video and sound setting in my chrome broswer is open too. Plz plz help me..