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

Table of contents

• Overview
  • Screenshot
  • Links
• My process
  • Built with
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

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

Screenshot

Links

• Solution URL: (https://github.com/Wizzy-05/text-to-speech)
• Live Site URL: (https://speechify.vercel.app/)

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>

Continued development

• Css Grid
• Sass functions
• React js
• Sass
• Node js
• Express js

Useful resources

• Open AI's Chat GPT.

Author

• Github - @Wizzy-05
• Twitter - @ahuzi_wisdom

Acknowledgments

My Laptop I guess😅