Speech app

1,208 kevekıbhack

Open In Editor Publish Your Code

Speech app

Recommended

18 October 2025

Basic HTML Template with Button (Spanish)

20 January 2025

Toast Notification

28 August 2025

Archinova: Mimarlık & Tasarım Stüdyosu | Türkiye

HTML

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Speech App</title>

<style>

body {

margin: 0;

padding: 0;

background: #121212;

color: white;

font-family: Arial, sans-serif;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

height: 100vh;

}

h1 {

margin-bottom: 20px;

}

textarea {

width: 80%;

height: 120px;

font-size: 1rem;

padding: 10px;

border-radius: 6px;

border: none;

resize: none;

outline: none;

}

button {

margin-top: 15px;

padding: 10px 20px;

font-size: 1rem;

background: #00bcd4;

border: none;

border-radius: 6px;

color: white;

cursor: pointer;

}

button:hover {

background: #0097a7;

}

select {

margin-top: 10px;

padding: 5px;

font-size: 1rem;

border-radius: 6px;

}

</style>

</head>

<body>

<h1>Speech App</h1>

<input id="text" placeholder="Type something to speak..." />

<select id="voiceSelect"></select>

<button onclick="speakText()">Speak</button>

<script>

const synth = window.speechSynthesis;

const textArea = document.getElementById('text');

const voiceSelect = document.getElementById('voiceSelect');

let voices = [];

function loadVoices() {

voices = synth.getVoices();

voiceSelect.innerHTML = '';

voices.forEach((voice, i) => {

const option = document.createElement('option');

option.value = i;

option.textContent = `${voice.name} (${voice.lang})`;

voiceSelect.appendChild(option);

});

}

if ('speechSynthesis' in window) {

loadVoices();

synth.onvoiceschanged = loadVoices;

}

function speakText() {

const text = textArea.value;

if (text.trim() === '') return;

const utterance = new SpeechSynthesisUtterance(text);

utterance.voice = voices[voiceSelect.value];

synth.speak(utterance);

}

</script>

</body>

</html>

CSS

JS