Abecedario Espanol
Published: 2022-11-05 14:03:02

My girlfriend is from Sevilla (Spain) and is currently looking for a job as language or history teacher in Berlin. I wanted to help her a bit by creating a website for her. While the website is far from being ready, we decided to begin with a teeny-tiny app that teaches you to pronounce the spanish alphabet, which has quite a few pecularities. The alphabet is represented by little black boxes with clickable letters. Special character are being identified by a small black cross that reveals more info when clicked.

The prototype is currently deployed on Netlify: [teresais-alfabeto](https://teresais-alfabeto.netlify.app/). The source code is on [Gitlab](https://gitlab.com/subliminal_guy/abecedario).


![Screenshot of the site](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ql7lanwon7eh3k4s939j.png)

**How does the Browser speak spanish?**

What may appear complicated is in fact really easy. I learned the basics in Wes Bos’s wonderful Vanilla JS course [JavaScript30](https://javascript30.com/). With only a few lines of code you can use the [SpeechSynthesis Constructor](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance) by MDN Web Docs. So all i really had to do was to define a new object instance in the data section of my App.vue.

Ups! Did I mention that I used Vue for the site? If you don’t know what Vue is you’ll find a free tutorial on the [Scrimba](https://scrimba.com/learn/learnvue) site. It is really basic but should suffice to understand my code.

Anyway I defined some variables in the data section, namely **synth** and **pronounciation**:

```
data () {
    return {
      data: this.$store.state.alphabet,
      synth: window.speechSynthesis,
      voiceSpanish: [],
      pronounciation: new window.SpeechSynthesisUtterance
    }
  },
```

In the method section I started with the method **speakLetter()**

```
methods: {
    speakLetter({msg}) {
      var voiceList = this.synth.getVoices()
      this.voiceSpanish = voiceList.filter(item => item.name === "Jorge")
      this.pronounciation.text = msg.toLowerCase()
      this.pronounciation.voice = this.voiceSpanish[0]
      this.synth.speak(this.pronounciation)
    }
}
```

First I call the list of available voices with the **.getVoices()**-method using the **synth**-variable we declared above and filter through it looking for the “Jorge”-voice. (My daughter seems to like this particular voice ;-)) Then we’ll set the **text**-attribute of the **SpeechSynthesisUtterance** instance to the text submitted in the function parameter and the **voice**-attribute to the voice of “Jorge”. Finally the **speak()**-method does the job of firing the voice.

**The LetterShow-Component**

The **LetterShow**-component is being called by **App.vue** to show the responding letters. For this purpose I have prepared a **data.json**-file that i’ve loaded into the Vuex-store.


![Foto of a code partition](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9jxc4dqnzkddd88bqsio.png)

It is really just an object that contains the letters and indicates if they have some special features or not. If so, those are being specified in the **infotextRojo** and **infotextVerde**-keys (Indicating strong and weak consonants in the spanish language).

I’m looping through this object with a **v-for**-directive and showing every letter with the **LetterShow**-component. Here is the HTML-part of it:

```
<template>
  <div class="letter-box">
      <h1 class="main-letter" @click="speak">{{ msg }}</h1>
      <p v-if="special" class="info-letter" @click="showModal">&#x2795;</p>
      <p v-else class="info-letter"></p>
  </div>
</template>

```

If the letter is special we’ll show a cross that activates the **Modal**-component to show the special cases. Both, the **LetterShow** and the **Modal**-component, fire Custom Events to trigger the **speakLetter**-method. That’s about it.

**Misc**

I guess my explication is somewhat abstract, so I’m inviting you to clone the [repository](https://gitlab.com/subliminal_guy/abecedario) and play around with it on your machine.

Currently it is not running on the mobile browsers I tried and I’m guessing it has to do with the experimental nature of the [SpeechSynthesis Constructor](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance). 
Also, to make sure that I’m really getting the “Jorge”-voice I had to fire the **speakLetter**-method once on page mount, because the SpeechSynthesis starts with the voice of an american woman by default.

```
mounted() {
    this.speakLetter({msg: ""})
  }
```

As you can see, i’m just calling the speakLetter*-method with an empty message, so that it is forced to load “Jorge” afterwards.

Have fun playing around!