html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Text To Speech with ResponsiveVoice</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="line loaded">
<span></span>
</div>
<iframe id="myIframe" src="https://texttospeech-zeta.vercel.app/" frameborder="0"></iframe>
<script src="script.js"></script>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
overflow: hidden;
}
iframe {
width: 100%;
height: 100vh;
display:none;
}
.line {
position:absolute;
height: 20px;
width: 60%;
border: 1px solid #2a2a2a;
background: #2a2a2a;
border-radius: 50px;
display: flex;
}
.line span {
display: block;
position: relative;
height: 100%;
border-radius: 50px;
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
setTimeout(
()=>{
document.querySelector('.line').style.display='none';
document.querySelector('#myIframe').style.display='block';
},2000)
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run