While speech synthesis is not cool as recognition you can still do pretty cool stuff with it, plus unlike recognition, synthesis is widely supported. for example, I recently built this gym app in React, during a workout Microsoft David is your PT dude be telling the time, calories, next workout, and so on, weird I know.
Getting Started
npm i use-speech18
The cool thing about the Hook is it's all functionality no UI stuff and will always depend on the latest version of React.
Using the Hook
// App.tsx
import { useState, useEffect } from 'react'
import useSpeech from "use-speech18"
function App() {
// init the Hook
const [index, setIndex] = useState(0) // we will use to cycle the array of voices
const {Speak, speak_utils} = useSpeech()
useEffect(()=> {
console.log("array of avalaible voices", speak_utils.Voices)
speak_utils.setVoice(speak_utils.Voices[index].name)
console.log(speak_utils.selectedVoice, "currently selected voice")
}, [speak_utils.Voices])
return (
<div className="app">
</div>
)
}
export default App
now to make it speak, you can create your own UI around this functionality to your heart's desire. for our purpose, I will only create a few controls to demo the Hook.
const text = `
I did not kill Joffrey, but I wish that I had! Watching your vicious bastard die gave me more relief than a thousand lying whores!, I wish I was the monster you think I am! I wish I had enough poison for the whole pack of you! I would gladly give my life to watch you all swallow it!, I will not give my life for Joffery's murder and I know I'll get no justice here, so I will let the gods decide my fate. I demand a trial by combat
`
function App(){
...
useEffect(()=> {
// when the index changes we want to get the next voice in the array, if there's
// no next, then we cycle back to the start
speak_utils.setVoice(speak_utils.Voices[index % speak_utils.Voices.length].name)
}, [index])
return (
<div className="app">
<div>
<label>Current Voice: </label>
<span>{speak_utils.selectedVoice?.name}</span>
</div>
<button onClick={() => Speak(text)}>speak</button>
<button onClick={()=> setIndex(prev => prev + 1)}>Next voice</button>
</div>
</div>
)
}
Simple isn't, now you can play with speech in your react apps, make it accessible, make you some spooky story reader app, I don't know.
Self-promo alert: I am working on a Digi product for those interested in making mobile apps with React that I will be dropping soon.
A complete, narrowed enough fast path from beginner Ionic developer to production.
We will build a complete mobile app with CRUD functionality, local and remote DB, Auth, Monetization, In-app store, and much more.
There is also an option for 1v1 mentorship as you go through the project.
if this sounds interesting to you please check it out.
Top comments (0)