Prosta apka na do wstawienia na stronę v.3

Trzecia wersja syntezatora mowy. Można zrobić pauzę przy długim tekście. Wpisz lub wklej tekst. Taki mały bajer do wstawienia na własną stronę www.

Poniżej znajdziecie wszystkie potrzebne do tego pliki.

Konwersja tekstu na mowę v.3

Kody 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>
<!-- www.skrip.pl -->
<html lang="pl">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Text To Speech Converter v.3</title>
<!-- Font Awesome CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
  <div class="home"><a href="https://skrip.pl/" target="_parent">Konwersja tekstu na mowę v.3</a></div>
  <div class="controls">
    <button class="btn" id="resume"> <i class="fa-solid fa-play"></i> </button>
    <button class="btn" id="pause"> <i class="fa-solid fa-pause"></i> </button>
  </div>

  <textarea
        placeholder="Wprowadź tekst..."
        id="txt"
        rows="6">
    </textarea>
  <button id="submit" type="submit">Czytaj</button>
</div>
<script src="script.js"></script>
</body>
</html>

style.css

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  height: 100vh;
  background: #ffffff;
}
.container {
  background-color: #fcfcfc;
  width: 90%;
  max-width: 37.5em;
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  border-radius: 0.5em;
  padding: 2em;
  border: solid 1px #cccccc;  
}
textarea {
  font-size: 1em;
  width: 100%;
  border-radius: 0.5em;
  padding: 1em;
  resize: none;
  border: 0.10em solid #cccccc;
}
#submit {
  font-size: 1.2em;
  font-weight: 600;
  display: block;
  width: 100%;
  position: relative;
  margin: auto;
  padding: 0.8em;
  border: none;
  background: #2196f3;
  color: #ebf2ff;
  border-radius: 0.3em;
  cursor: pointer;
  margin-top: 2em;
}
.controls {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1em;
}
.controls button {
  display: block;
  width: 3em;
  height: 3em;
  font-size: 1em;
  border-radius: 0.3em;
  cursor: pointer;
  color: #2196f3;
  border: 0.12em solid #2196f3;
  background-color: transparent;
}
.home a{
  width: 70%;
  color: #2196f3;  
  font-size: 1.2rem;
  font-weight: 600;
  text-decoration: none;
}

script.js

// JavaScript Document
// www.skrip.pl
let text = document.getElementById("txt");

let submitBtn = document.getElementById("submit");
let resumeBtn = document.getElementById("resume");
let pauseBtn = document.getElementById("pause");
let audioMessage;

submitBtn.addEventListener("click", () => {
  //set the text
  audioMessage.text = text.value;
  //speak the text
  window.speechSynthesis.speak(audioMessage);
});

resumeBtn.addEventListener("click", () => {
  pauseBtn.style.display = "block";
  resumeBtn.style.display = "none";
  //resume the audio if it is paused
  if (speechSynthesis.pause) {
    speechSynthesis.resume();
  }
});

pause.addEventListener("click", () => {
  pauseBtn.style.display = "none";
  resumeBtn.style.display = "block";
  //pause if speaking
  speechSynthesis.speaking ? speechSynthesis.pause() : "";
});

window.onload = () => {
  resumeBtn.style.display = "none";
  if ("speechSynthesis" in window) {
    audioMessage = new SpeechSynthesisUtterance();
  } else {
    alert("Speech Synthese is not supported");
  }
};

Top Stories

Wangiri scam – jak nie zostać ofiarą

Statystyki wyszukiwarki PornHub za 2024 rok

Prosty sposób na zdobycie 1000 GB transferu danych na rok w Orange na kartę

Zmiana tekstu na mowę v.3

Trzecia wersja syntezatora mowy. Można zrobić pauzę przy długim tekście.

Prosta apka na do wstawienia na stronę v.3

Kody apki

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

index.html

style.css

script.js

Lub pobrać gotowca

WOŚP 2025

Chmurka tagów

Zaprzyjaźniona strona

Najczęściej oglądane wpisy