text-to-speech's Introduction

Speechify - A Web Application that turns your texts to speech.

Overview
- Screenshot
- Links
My process
Author
Acknowledgments

Overview

Tsks...a web application that is used to keep track of daily tasks in life.

Screenshot

My process

Built with

CSS custom properties
Flexbox
CSS Grid
Mobile-first workflow
React js - JS library
Sass - CSS Preprocessor
Speech Synthesis

Some Nice Stuffs

     const handlePlay = () => {
    const text = textArea.current.value;
    let utterance;

    if (speechSynthesis.current.paused && speechSynthesis.current.speaking) {
      return speechSynthesis.current.resume();
    }
    if (selectedVoice) {
      const msg = new SpeechSynthesisUtterance(text);
      msg.rate = speedRef.current.value || 1;
      console.log(msg.rate);
      msg.voice = window.speechSynthesis
        .getVoices()
        .find((voice) => voice.name === selectedVoice);
      window.speechSynthesis.speak(msg);
    } else {
      utterance = new SpeechSynthesisUtterance(text);
      utterance.rate = speedRef.current.value || 1;
      console.log(utterance.rate);
      speechSynthesis.current.speak(utterance);
    }

    setDisabledTextArea("disabled");
  };

    #section-one {
      @include utils.flex-display($direction: column, $justify: unset);
      gap: 5px;
      h1 {
        font-size: 2rem;
        color: utils.$text-primary;
        text-align: center;
      }

      h4 {
        text-align: center;
        font-size: 12px;
        color: #17172dad;
      }
    }

     <aside ref={sideBar}>
        <h3>Don't Like current Voice? </h3>
        {voices.map((voice) => (
          <span
            key={uuidv4()}
            onClick={(e) => {
              handleChangeVoice(voice, e);
            }}
          >
            {voice.name}
          </span>
        ))}
      </aside>