<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Text to Speech</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
color: #ff6600;
}
#text-input {
width: 400px;
height: 150px;
margin: 20px auto;
padding: 10px;
resize: none;
}
#language-select {
margin-bottom: 20px;
}
#speak-button {
background-color: #ff6600;
color: #fff;
padding: 10px 20px;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Text to Speech Converter</h1>
<textarea id="text-input" placeholder="Enter text..."></textarea>
<div>
<label for="language-select">Select Language:</label>
<select id="language-select">
<option value="en-US">English (US)</option>
<option value="en-GB">English (UK)</option>
<option value="fr-FR">French</option>
<option value="de-DE">German</option>
<!-- Add more language options here -->
</select>
</div>
<button id="speak-button">Speak</button>
<script src="https://code.responsivevoice.org/responsivevoice.js?key=YOUR_API_KEY"></script>
<script>
document.getElementById('speak-button').addEventListener('click', function() {
var text = document.getElementById('text-input').value;
var language = document.getElementById('language-select').value;
responsiveVoice.speak(text, language);
});
</script>
</body>
</html>
Documentation
Step 1:- Open txt file from the folder for code
Step 2:- Copy all code
Step 3:- Open your website dashboard or blog
Step 4:- Add HTML element
Step 5:- Paste all code in your html element
Step 6:- Save file
Done you are successfully Pasted code in your website.
