Speech app

1,131 kevekıbhack

Open In Editor Publish Your Code

Speech app

Recommended

10 October 2025

CSS Animation Fragments Container

18 June 2023

Simple Login Form

25 June 2025

Araba Alım Satım Platformu: İlanlar, Filtreleme

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