<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text to Speech Generator</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
<style>
body {
background-color: #f0f4f8;
padding: 20px;
}
.header {
text-align: center;
margin-bottom: 20px;
}
.voice-buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.voice-buttons button {
margin: 5px;
}
.output {
text-align: center;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>Text to Speech Generator</h1>
<p>Enter your text and choose a voice option!</p>
</div>
<div class="input-field">
<textarea id="inputText" class="materialize-textarea" placeholder="Type or paste your text here"></textarea>
</div>
<div class="voice-buttons">
<button class="btn" onclick="speakText('boy')">Boy Voice</button>
<button class="btn" onclick="speakText('girl')">Girl Voice</button>
<button class="btn" onclick="speakText('light')">Light Voice</button>
<button class="btn" onclick="speakText('hard')">Hard Voice</button>
<!-- Add more buttons as needed -->
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="script.js"></script>
</body>
</html>
----------------------------------------------
// script.js
// Function to select the appropriate voice based on user input
function getVoice(voiceType) {
const synth = window.speechSynthesis;
const voices = synth.getVoices();
let selectedVoice;
switch(voiceType) {
case 'boy':
selectedVoice = voices.find(voice => voice.name.includes('David') || voice.name.includes('Daniel'));
break;
case 'girl':
selectedVoice = voices.find(voice => voice.name.includes('Zira') || voice.name.includes('Samantha'));
break;
case 'light':
selectedVoice = voices.find(voice => voice.name.includes('Google UK English Female'));
break;
case 'hard':
selectedVoice = voices.find(voice => voice.name.includes('Google UK English Male'));
break;
default:
selectedVoice = voices[0]; // default to the first available voice
}
return selectedVoice;
}
// Function to speak the text
function speakText(voiceType) {
const synth = window.speechSynthesis;
const inputText = document.getElementById('inputText').value;
if (inputText.trim() === '') {
M.toast({html: 'Please enter some text to speak.'});
return;
}
const utterThis = new SpeechSynthesisUtterance(inputText);
const selectedVoice = getVoice(voiceType);
if (selectedVoice) {
utterThis.voice = selectedVoice;
} else {
M.toast({html: 'Selected voice not available. Using default voice.'});
}
// Adjust the rate, pitch, and volume
utterThis.rate = 1; // Normal rate
utterThis.pitch = 1; // Normal pitch
utterThis.volume = 1; // Full volume
synth.speak(utterThis);
}
// Ensure voices are loaded before use
window.speechSynthesis.onvoiceschanged = () => {
// You can use this event to trigger some action if needed
};
Comments
Post a Comment