Wordza

Wordza was a web application I built with Vue.js + Vuex after having traveled around Ukraine for over a month. I’ve always had an interest in the Russian language since I was a child. I found the Cyrillic alphabet fascinating with it’s classic communistic block typeface and similar looking characters to the Latin alphabet. In my travels I realized that if I knew English, Spanish, and Russian that I would be able to speak to someone almost anywhere in the world.

With that ideal in mind, I began searching for language learning software! I soon found out that if you know the 1,000 most commonly used words in a language you can roughly understand the gist of 60% of what is said. This was a powerful concept in my mind. I would seek to learn the top 1,000 most commonly used words followed by grammar and natural conversation practice.

I was unable to find flashcard software that suited my three basic criteria:

1. Allow for my own custom submitted word lists in addition to containing the top 1,000 most commonly spoken words.
2. Automatic speech of the word or phrase by a native language sounding speaker via text to speech (TTS).
3. Speech recognition of my spoken word and matching of my pronunciation with that of the text to speech.

With that discovery, Wordza: Language Flashcards was born!

I was pleasantly surprised to learn that some browsers, at the time of writing Chrome and Android browser, supported text to speech and speech recognition in the Web Speech API.

Text to speech functionality plays off this…

[code]
playTTS() {
let utterance = new SpeechSynthesisUtterance(this.$store.getters.currentWord);
utterance.lang = this.$store.getters.currentLang;
utterance.voice = speechSynthesis.getVoices()[18]; // Russian Voice
speechSynthesis.speak(utterance);
},
[/code]

While speech recognition is like this…

[code]
recordAudio() {
// Reset Match Status
this.recording = true;
this.speechMatch = null;
this.speechWord = “…”;

window.SpeechRecognition = window.webkitSpeechRecognition || window.SpeechRecognition;

this.recognition = new SpeechRecognition();
this.recognition.lang = this.$store.getters.currentLang;
this.recognition.interimResults = false;
this.recognition.maxAlternatives = 1;
this.recognition.start();

this.recognition.onresult = (event) => {
const word = event.results[0][0].transcript;
this.speechWord = word;
this.recording = false;

if (word === that.$store.getters.currentWord) {
this.speechMatch = true;
this.playCorrectBeep();
} else {
this.speechMatch = false;
this.playIncorrectBeep();
}
}
},
[/code]

Post in progress come back later!