rnd195
May 31, 2026
Put any text into the field below, choose a voice, and press “Speak”.
Select a voice:
Please note that some browsers contain “online” voices and using these may result in your text not being processed locally.
Last updated: 2026-05-31
---
title: "Read this"
author: "rnd195"
date: "2026-05-31"
categories: [text, audio]
description: "Read text using built-in text-to-speech"
image: "readthis.assets/readthis.png"
last_updated: "2026-05-31"
---
<style>
:root {
--dark: #303030;
--light: #dadada;
}
.text-field-tts {
width: 100%;
background-color: var(--light);
border-radius: 5px;
padding: 7px 12px 7px 12px;
}
.voice-select-tts {
width: 100%;
height: 7em;
color: var(--light);
background-color: var(--dark);
border-radius: 5px;
}
.button-tts {
border: none;
border-radius: 5px;
padding: 7px 12px 7px 12px;
font-size: 12pt;
cursor: pointer;
margin: 10px 6px 10px 0px;
}
.button-tts-misc {
border: none;
border-radius: 5px;
padding: 7px 12px 7px 12px;
font-size: 12pt;
cursor: pointer;
margin: 10px 6px 10px 0px;
color: var(--dark);
background-color: var(--light);
}
.button-tts-misc:hover {
background-color: #b1b1b1;
}
.button-tts-misc:active {
background-color: #7e7e7e;
}
#button-tts-main {
color: var(--light);
background-color: #2654d3;
}
#button-tts-main:hover {
background-color: #1e43a8;
}
#button-tts-main:active {
background-color: #152e72;
}
</style>
Put any text into the field below, choose a voice, and press "Speak".
<button type="button" class="button-tts" id="button-tts-main">Speak</button>
<button type="button" class="button-tts-misc" id="button-tts-stop">Stop</button>
<button type="button" class="button-tts-misc" id="button-tts-delete">Delete</button>
<textarea class="text-field-tts" rows="10" placeholder="Paste text here!"></textarea>
Select a voice:
<select class="voice-select-tts" size="3"></select>
<script>
(function () {
"use strict";
const synthesis = window.speechSynthesis;
const speakerSelect = document.querySelector(".voice-select-tts");
const inputField = document.querySelector(".text-field-tts");
const btnSpeak = document.querySelector("#button-tts-main");
const btnStop = document.querySelector("#button-tts-stop");
const btnDelete = document.querySelector("#button-tts-delete");
let speakersArray = [];
// Filter languages preferred by me personally by default
function filterMyLanguages(voice) {
return voice.lang === "cs-CZ" || voice.lang === "en-US";
}
function loadSpeakers() {
if (!speakerSelect) return;
speakerSelect.innerHTML = "";
const allVoices = synthesis.getVoices();
speakersArray = allVoices.filter(filterMyLanguages);
// In case of no speech modules present on the device
if (speakersArray.length === 0) {
const noVoicesOption = document.createElement("option");
noVoicesOption.textContent = "No voices found on this device";
noVoicesOption.disabled = true;
noVoicesOption.selected = true;
speakerSelect.appendChild(noVoicesOption);
return;
}
// Fill up voice select element
speakersArray.forEach((voice, index) => {
const option = document.createElement("option");
option.textContent = `${voice.lang}: ${voice.name}`;
option.value = index;
speakerSelect.appendChild(option);
});
// Select topmost voice by default
speakerSelect.selectedIndex = 0;
}
function speakText() {
if (!inputField || !inputField.value.trim()) {
console.warn("The text field is empty.");
return;
}
// Prevent queues
synthesis.cancel();
const sayThis = new SpeechSynthesisUtterance(inputField.value);
const selectedIndex = speakerSelect.selectedIndex;
if (selectedIndex >= 0 && speakersArray[selectedIndex]) {
sayThis.voice = speakersArray[selectedIndex];
}
synthesis.speak(sayThis);
}
function stopSpeech() {
synthesis.cancel();
}
function deleteText() {
if (inputField) {
inputField.value = "";
inputField.focus();
}
}
// Load voices in possibly all browser engines
function initializeVoices() {
loadSpeakers();
if ("onvoiceschanged" in synthesis) {
synthesis.onvoiceschanged = loadSpeakers;
} else {
setTimeout(loadSpeakers, 2000);
}
}
initializeVoices();
if (btnSpeak) btnSpeak.addEventListener("click", speakText);
if (btnStop) btnStop.addEventListener("click", stopSpeech);
if (btnDelete) btnDelete.addEventListener("click", deleteText);
})();
</script>
Please note that some browsers contain "online" voices and using these may result in your text not being processed locally.
<p class="meta-last-updated">Last updated: {{< meta last_updated >}}</p>