|
Obukowho
6 days, 13 hours ago |
Try it. <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Voice Chat AI</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: Arial, sans-serif;
background: #0f172a;
color: white;
text-align: center;
padding: 40px;
}
.box {
max-width: 400px;
margin: auto;
background: #1e293b;
padding: 20px;
border-radius: 12px;
}
button {
padding: 15px 25px;
border: none;
border-radius: 10px;
background: #2563eb;
color: white;
font-size: 16px;
cursor: pointer;
}
#text {
margin-top: 15px;
font-size: 15px;
}
</style>
</head>
<body>
<h1>🎙️ Voice Chat AI</h1>
<div class="box">
<button onclick="startListening()">Start Talking</button>
<p id="text">Say something…</p>
</div>
<script>
const SpeechRecognition =
window.SpeechRecognition || window.webkitSpeechRecognition;
const recognition = new SpeechRecognition();
recognition.lang = "en-US";
function startListening() {
recognition.start();
}
recognition.onresult = function(event) {
const speech = event.results[0][0].transcript.toLowerCase();
document.getElementById("text").innerText = "You said: " + speech;
let reply = "I did not understand.";
if (speech.includes("hello")) reply = "Hello! Nice to hear you.";
else if (speech.includes("your name")) reply = "I am your voice AI.";
else if (speech.includes("game")) reply = "Try the games on the home page.";
else if (speech.includes("help")) reply = "I am here to help you.";
speak(reply);
};
function speak(message) {
const speech = new SpeechSynthesisUtterance(message);
speech.lang = "
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Voice Chat AI</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: Arial, sans-serif;
background: #0f172a;
color: white;
text-align: center;
padding: 40px;
}
.box {
max-width: 400px;
margin: auto;
background: #1e293b;
padding: 20px;
border-radius: 12px;
}
button {
padding: 15px 25px;
border: none;
border-radius: 10px;
background: #2563eb;
color: white;
font-size: 16px;
cursor: pointer;
}
#text {
margin-top: 15px;
font-size: 15px;
}
</style>
</head>
<body>
<h1>🎙️ Voice Chat AI</h1>
<div class="box">
<button onclick="startListening()">Start Talking</button>
<p id="text">Say something…</p>
</div>
<script>
const SpeechRecognition =
window.SpeechRecognition || window.webkitSpeechRecognition;
const recognition = new SpeechRecognition();
recognition.lang = "en-US";
function startListening() {
recognition.start();
}
recognition.onresult = function(event) {
const speech = event.results[0][0].transcript.toLowerCase();
document.getElementById("text").innerText = "You said: " + speech;
let reply = "I did not understand.";
if (speech.includes("hello")) reply = "Hello! Nice to hear you.";
else if (speech.includes("your name")) reply = "I am your voice AI.";
else if (speech.includes("game")) reply = "Try the games on the home page.";
else if (speech.includes("help")) reply = "I am here to help you.";
speak(reply);
};
function speak(message) {
const speech = new SpeechSynthesisUtterance(message);
speech.lang = "
22 views
6
Comments 
