speech finish

This commit is contained in:
Chris 2020-11-17 22:07:15 -05:00
parent 6943c866a8
commit b6847b2768
3 changed files with 48 additions and 3 deletions

View File

@ -4,8 +4,15 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> <title>Document</title>
<link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<script src="Test.js"></script> <script src="Test.js"></script>
<div class="container">
<button id="btn" onclick="test()">click me</button>
<h1 id="out"></h1>
</div>
</body> </body>
</html> </html>

View File

@ -4,16 +4,25 @@ if ('speechSynthesis' in window) {
}else{ }else{
alert('error') alert('error')
} }
let num = 1;
// alert("test"); // alert("test");
var msg = new SpeechSynthesisUtterance(); var msg = new SpeechSynthesisUtterance();
var voices = window.speechSynthesis.getVoices(); var voices = window.speechSynthesis.getVoices();
msg.voice = voices[10]; // msg.voice = voices[01];
msg.volume = 1; msg.volume = 1;
// From 0 to 1 // From 0 to 1
msg.rate = 1; msg.rate = 1;
// From 0.1 to 10 // From 0.1 to 10
msg.pitch = 0; msg.pitch = 0;
// From 0 to 2 // From 0 to 2
msg.text = "1"; msg.text = num;
msg.lang = 'en'; msg.lang = 'en';
//
function test(){
document.getElementById("out").onclick = "";
document.getElementById("out").innerHTML = num;
msg.text = num;
speechSynthesis.speak(msg); speechSynthesis.speak(msg);
num= num+1;
document.getElementById("out").onclick = "out()";
}

29
speech/style.css Normal file
View File

@ -0,0 +1,29 @@
.container{
display: flex;
flex-direction: column;
justify-items: center;
align-items: center;
background-color: cornflowerblue;
padding: 20px;
height: 100%;
}
body{
box-sizing: border-box;
margin: 0;
background-color: cornflowerblue;
}
#btn{
color: blueviolet;
background-color: pink;
height: 200px;
width: 200px;
font-size: 4rem;
border-radius: 50%;
border: none;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
h1{
font-size: 7rem;
}