Prosta apka na do wstawienia na stronę

Wpisz lub wklej tekst. Zwykły syntezator mowy. Taki mały bajer do wstawienia na własną stronę www.

Poniżej znajdziecie wszystkie potrzebne do tego pliki.

Zamiana tekstu na mowę

Pliki apki

Jak wstawić apkę na własną stronę?

Można to zrobić ręcznie lub pobrać gotowca i go edytować jak dusza zapragnie.

Tworzymy odpowiednie pliki:

index.html
style.css
script.js

Index.html

<!DOCTYPE html> 
<!-- tommiW -->
<html lang="pl">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Zamiana tekstu na mowę</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div>
<div class="container">
<header>Zamiana tekstu na mowę</header>

<textarea placeholder="Wpisz tekst..."></textarea>

<button>Konwertuj tekst na mowę</button>
</div>
</div>
<script src="script.js" defer></script>
</body>
</html>

style.css

/* Import Google font - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
}
.container {
  position: relative;
  max-width: 390px;
  width: 100%;
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.1);
  border: solid 1px #eaeaea;
}
header {
  font-size: 18px;
  color: #333;
  font-weight: 600;
  text-align: center;
}
textarea {
  width: 100%;
  height: 180px;
  border-radius: 8px;
  margin: 20px 0;
  padding: 10px 15px;
  resize: none;
  outline: none;
  border: 1px solid #aaa;
}
button {
  width: 350px;
  padding: 14px 0;
  border: none;
  border-radius: 8px;
  color: #fff;
  background: #2196f3;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 600;
}
button:hover {
  background: #ff0000;
}
.home a{
  width: 100%;
  padding: 10px;
  color: #2196f3;  
  font-size: 0.6rem;
  text-decoration: none;
}

script.js

// JavaScript Document
// www.skrip.pl
const textarea = document.querySelector("textarea");
const button = document.querySelector("button");
let isSpeaking = true;

const textToSpeech = () => {
  const synth = window.speechSynthesis;
  const text = textarea.value;

  if (!synth.speaking && text) {
    const utternace = new SpeechSynthesisUtterance(text);
    synth.speak(utternace);
  }

  if (text.length > 50) {
    if (synth.speaking && isSpeaking) {
      button.innerText = "Przerwa";
      synth.resume();
      isSpeaking = false;
    } else {
      button.innerText = "Wznów";
      synth.pause();
      isSpeaking = true;
    }
  } else {
    isSpeaking = false;
    button.innerText = "Mówienie";
  }

  setInterval(() => {
    if (!synth.speaking && !isSpeaking) {
      isSpeaking = true;
      button.innerText = "Konwertuj tekst na mowę ";
    }
  });
};

button.addEventListener("click", textToSpeech);

Lub pobierz gotowca.

Top Stories

Cicada 3301 – krótka historia

Do sprzedania: CASIO G-Shock Multi Fluorescent GA-B2100MF-1A Tough Solar – Bluetooth

Grupa PLA Unit 61398 – krótka historia

Zmiana tekstu na mowę v.1

Taki mały bajer do wstawienia na własną stronę www.

Prosta apka na do wstawienia na stronę

Pliki apki

Jak wstawić apkę na własną stronę?

Index.html

style.css

script.js

Chmurka tagów

Zaprzyjaźniona strona

Najczęściej oglądane wpisy

Top Stories

Cicada 3301 – krótka historia

Do sprzedania: CASIO G-Shock Multi Fluorescent GA-B2100MF-1A Tough Solar – Bluetooth

Grupa PLA Unit 61398 – krótka historia

Prosta apka na do wstawienia na stronę

Pliki apki

Jak wstawić apkę na własną stronę?

Index.html

style.css

script.js

Może Ci się spodobać:

Wyścigi samochodowe Online

Idziesz do kasyna: BlackJack – podstawy gry online

Gra Asteroids online

Generator kodów paskowych online