March 9, 2020•297 words
I had this idea the day before (after my lesson) to randomly generate a date, and then have some TTS software to speak it, and then test myself on how how well I can hear the dates from that.
I found out about the Web Speech API, and got something working yesterday, done in React. I started with React JS but converted it to TypeScript because I'm more comfortable with that. I used Create React App, which is definitely overkill. I really don't need all those extra dependencies...
What I made had three buttons: Play, Show Answer, Next. It was a lot of work trying to figure out which button was the one I intended to press.
Today, I improved it so that there's a state, like the "front" and "back" of a card, and there's only either a "Show Answer" or "Next" button, but not both.
I drew some simple wireframes in Sketch but ended up not going with what I drew. Still, I added Bootstrap today so that the buttons and layout can be beautified a little without having to do any custom CSS since I don't want to spend too much time on this.
There's still more to iron out, but this is pretty good and I can work with it. I added controls for changing the pitch and speed as well, inspired by this demo.
The only downside is that Firefox doesn't seem to have any Korean voices. Either that or because of my custom privacy tweaks. Either way, it means using Chrome, which I'd rather avoid in most scenarios. Chrome has 2 Korean voices. Not a lot but, it's workable.
I probably have to also add the -이에요 to complete the sentence to the spoken audio. That will be something for tomorrow.