Speech app

320 kevekıbhack

Open In Editor Publish Your Code

Speech app

Recommended

18 December 2023

Text Animation in HTML and CSS

17 September 2024

Date Calculator

21 May 2025

Portfolio Landing Page

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