A simple way to convert text to speech online,/Text to Voice Converter there are several text-to-voice converter websites and applications available. These tools allow you to input text, and they will generate spoken audio from it. Here’s how you can use a basic online text-to-voice converter:
HTML Source Code Text to Voice Converter
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Speech Text Reader</h1>
<button id="toggle" class="btn btn-toggle">
Toggle Text Box
</button>
<div id="text-box" class="text-box box">
<div id="close" class="close">X</div>
<h3>Choose Voice</h3>
<select id="voices"></select>
<textarea id="text" placeholder="Enter text to read..."></textarea>
<button class="btn" id="read">Read Text</button>
</div>
<main></main>
</div>
<script src="rakesh.js"></script>
</body>
</html>Form Validation Project Using HTML ,CSS ,JavaScript
CSS Source Code Text to Voice Converter
@import url('https://fonts.googleapis.com/css?family=Lato');
*{
box-sizing: border-box;
}
body{
background: #ffefea;
font-family: 'Lato',sans-serif;
min-height: 100vh;
margin: 0;
}
h1{
text-align: center;
}
.container{
margin: auto;
padding: 20px;
}
.btn{
cursor: pointer;
background-color: darksalmon;
border: 0;
border-radius: 4px;
color: #ffff;
font-size: 16px;
padding: 8px;
}
.btn:active {
transform: scale(0.98);
}
.btn:focus,
select:focus{
outline: 0;
}
.btn-toggle{
display: block;
margin: auto;
margin-bottom: 20px;
}
.text-box{
width: 70%;
position: absolute;
top: 30%;
left: 50%;
transform: translate(-50%,-800px);
background-color: #333;
color: #fff;
padding: 20px;
border-radius: 5px;
transition: all 1s ease-in-out;
}
/* .text-box.show {
transform: translate(-50%, 0);
} */
.text-box.show{
transform: translate(-50%,0);
}
.text-box select{
background-color: darksalmon;
border: 0;
color: #fff;
font-size: 12px;
height: 30px;
width: 100%;
}
.text-box textarea{
border: 1px #dadada;
border-radius: 4px;
font-size: 16px;
padding: 8px;
margin: 15px 0;
width: 100%;
height: 150px;
}
.text-box .btn{
width: 100%;
}
.text-box .close{
float: right;
text-align: right;
cursor: pointer;
}
main{
display:grid;
grid-template-columns: repeat(4,1fr);
grid-gap: 10px;
}
.box{
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
border-radius: 5px;
cursor: pointer;
display: flex;
flex-direction: column;
overflow: hidden;
transition: box-shadow .2s ease-out;
}
.box.active {
box-shadow: 0 0 10px 5px darksalmon;
}
.box img{
width: 100%;
object-fit: cover;
height: 200px;
}
.box .info {
background-color: rgb(219, 91, 49);
color: rgb(26, 166, 221);
font-size: 18px;
letter-spacing: 1px;
text-transform: uppercase;
margin: 0;
padding: 10px;
text-align: center;
height: 100%;
}
@media(max-width:1100px){
main{
grid-template-columns: repeat(3,1fr);
}
}
@media(max-width:760px){
main{
grid-template-columns: repeat(2,1fr);
}
}
@media(max-width:500px){
main{
grid-template-columns: 1fr;
}
}JavaScript Source Code Text to Voice Converter
const main =document.querySelector('main');
const voicesSelect= document.getElementById('voices');
const textarea= document.getElementById('text');
const readBtn= document.getElementById('read');
const toggleBtn= document.getElementById('toggle');
const closeBtn= document.getElementById('close');
const data=[
{
image:'./img/drink.jpg',
text: "I'm Thirsty"
},
{
image: './img/food.jpg',
text: "I'm Hungry"
},
{
image: './img/tired.jpg',
text: "I'm Tired"
},
{
image: './img/hurt.jpg',
text: "I'm Hurt"
},
{
image: './img/happy.jpg',
text: "I'm Happy"
},
{
image: './img/angry.jpg',
text: "I'm Angry"
},
{
image: './img/sad.jpg',
text: "I'm Sad"
},
{
image: './img/scared.jpg',
text: "I'm Scared"
},
{
image: './img/outside.jpg',
text: 'I Want To Go Outside'
},
{
image: './img/home.jpg',
text: 'I Want To Go Home'
},
{
image: './img/school.jpg',
text: 'I Want To Go To School'
},
{
image: './img/grandma.jpg',
text: 'I Want To Go To Grandmas'
}
];
data.forEach(createBox);
//Create speech boxs
function createBox(item){
// console.log(item);
const box=document.createElement('div');
const { image, text }=item;
box.classList.add('box');
box.innerHTML= `
<img src="${image}" alt="${text}" />
<p class="info">${text}</p>
`;
box.addEventListener('click', () => {
setTextMessage(text);
speakText();
// Add active effect
box.classList.add('active');
setTimeout(() => box.classList.remove('active'), 1000);
});
main.appendChild(box);
}
// Init speech synth
const message = new SpeechSynthesisUtterance();
// store voices
let voices = [];
function getVoices() {
voices = speechSynthesis.getVoices();
voices.forEach(voice => {
const option = document.createElement('option');
option.value = voice.name;
option.innerText = `${voice.name} ${voice.lang}`;
voicesSelect.appendChild(option);
});
}
// set text
function setTextMessage(text){
message.text = text;
}
// Speak text
function speakText(){
speechSynthesis.speak(message)
}
// set voices
function setVoice(e){
message.voice = voices.find(voice => voice.name ===e.target.value);
}
// Voices changed
speechSynthesis.addEventListener('voiceschanged', getVoices);
// Toggle text box
toggleBtn.addEventListener('click',()=>
document.getElementById('text-box').classList.toggle('show')
);
// close button
closeBtn.addEventListener('click',()=>
document.getElementById('text-box').classList.remove('show')
);
// change vices
voicesSelect.addEventListener('change',setVoice);
// Read text button
readBtn.addEventListener('click',() =>{
setTextMessage(textarea.value);
speakText();
})
getVoices();
In the JavaScript part:
- We check if the browser supports the Web Speech API using the
'speechSynthesis' in windowcondition. - If the API is supported, we create a
SpeechSynthesisUtteranceobject with the text to be spoken and usespeechSynthesis.speak()to play it. - If the API is not supported, we display an alert indicating that the browser doesn’t support the feature.
This is a basic example. You can further enhance it by adding features like language selection, rate control, and voice selection if needed. The Web Speech API allows for customization, so you can tailor it to your specific requirements.
Выберите прочную скотч ленту
клейкая лента клейкая лента.
Скоростроительные здания: финансовая выгода в каждой составляющей!
В современном обществе, где минуты – капитал, экспресс-конструкции стали настоящим спасением для фирм. Эти новейшие строения объединяют в себе высокую надежность, экономическую эффективность и молниеносную установку, что делает их наилучшим вариантом для разных коммерческих начинаний.
Построить быстровозводимое здание
1. Молниеносное строительство: Секунды – определяющие финансовые ресурсы в экономике, и сооружения моментального монтажа позволяют существенно сократить сроки строительства. Это чрезвычайно полезно в моменты, когда актуально быстро начать вести дело и получать доход.
2. Экономичность: За счет совершенствования производственных процессов элементов и сборки на площадке, экономические затраты на моментальные строения часто бывает менее, чем у традиционных строительных проектов. Это предоставляет шанс сократить издержки и получить лучшую инвестиционную отдачу.
Подробнее на http://scholding.ru/
В заключение, моментальные сооружения – это первоклассное решение для проектов любого масштаба. Они комбинируют в себе быстроту монтажа, экономичность и высокую прочность, что дает им возможность наилучшим вариантом для предпринимательских начинаний, готовых к мгновенному началу бизнеса и извлекать прибыль. Не упустите возможность сократить издержки и сэкономить время, выбрав быстровозводимые здания для ваших будущих проектов!
It’s best to participate in a contest for the most effective blogs on the web. I’ll suggest this site!
WONDERFUL Post.thanks for share..more wait .. …
Great wordpress blog here.. It’s hard to find quality writing like yours these days. I really appreciate people like you! take care