PAlCon by Artem Bloschinsky

by kontrach

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">
<div class="container">
  <form>
    <div class="PhoneticParser center-align valign-wrapper">

      <h1 class="header flow-text">Converter to the ICAO phonetic alphabet</h1>

      <div class="row">
        <div class="col s10 offset-s1">


          <input class="text_field center-align hoverable" type="text" value="">


        </div>
      </div>

      <p class="output indigo-text darken-4-text"></p>
      <input id="play" type="submit" value="Read it for me, please">

    </div>
  </form>
</div>

CSS

.PhoneticParser {
  display: block;
  padding: 10% 0 0 0;
}

.header {
  font-weight: 300;
}

.text_field {
  display: block;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.5) !important;
}

.text_field:focus {
  outline: 0;
}

.output {
  font-size: 25px;
  font-weight: 500;
  text-align: center;
  margin-top: 5px;
}

JavaScript

(function() {
  var inputText = document.querySelector(".text_field");
  var outputText = document.querySelector(".output");
  var playBtn = document.querySelector('#play');
  var form = document.querySelector('form');

form.addEventListener('submit', (e) => {
    e.stopPropagation();
    e.preventDefault();
    speak();
  })

  var ICAO;

  ICAO = Object.create(null);

  ICAO = {
    A: "Álfa",
    B: "Brávo",
    C: "Chárlie",
    D: "Délta",
    E: "Écho",
    F: "Fóxtrot",
    G: "Gólf",
    H: "Hotél",
    I: "Índia",
    J: "Júliet",
    K: "Kílo",
    L: "Líma",
    M: "Mike",
    N: "Novémber",
    O: "Óscar",
    P: "Papá",
    Q: "Quebéc",
    R: "Rómeo",
    S: "Siérra",
    T: "Tángo",
    U: "Úniform",
    V: "Víctor",
    W: "Whísky",
    X: "X-ray",
    Y: "Yánkee",
    Z: "Zúlu",
    1: "One",
    2: "Two",
    3: "Three",
    4: "Four",
    5: "Five",
    6: "Six",
    7: "Seven",
    8: "Eight",
    9: "Nine",
    0: "Zero",
    А: "А́нна",
    Б: "Бори́с",
    В: "Васи́лий",
    Г: "Григо́рий",
    Д: "Дми́трий",
    Е: "Еле́на",
    Ё: "Еле́на",
    Ж: "Же́ня",
    З: "Зинаи́да",
    И: "Ива́н",
    Й: "Ива́н кра́ткий",
    К: "Константи́н",
    Л: "Леони́д",
    М: "Михаи́л",
    Н: "Никола́й",
    О: "О́льга",
    П: "Па́вел",
    Р: "Рома́н",
    С: "Семён",
    Т: "Татья́на",
    У: "Улья́на",
    Ф: "Фёдор",
    Х: "Харито́н",
    Ц: "ца́пля",
    Ч: "чайка",
    Ш: "Шу́ра",
    Щ: "щу́ка",
    Ъ: "твёрдый знак",
    Ы: "е́ры",
    Ь: "мя́гкий знак",
    Э: "э́хо",
    Ю: "Ю́рий",
    Я: "Я́ков"
  }

  inputText.addEventListener("keyup", parsing);
  // playBtn.addEventListener('click', speak);

  var wordsArray = [];
  var voices = window.speechSynthesis.getVoices();
  var voice = voices[10];
  var voiceURI = 'native';
  var volume = 1; // 0 to 1
  var rate = 1; // 0.1 to 10
  var pitch = 1;
  var lang = 'ru-Ru';

  window.speak = function speak() {
    var msg = new SpeechSynthesisUtterance();

    msg.voice = voice; // Note: some voices...