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 name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="Test.js"></script>
<div class="container">
<button id="btn" onclick="test()">click me</button>
<h1 id="out"></h1>
</div>
</body>
</html>

View File

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