In this lab, I followed the instruction from JavaScript30 and recreated the Speech Detection activity. First off, I made the HTML, CSS, and JavaScript files. Secondly, the <html>, <head>, <body>, <meta>, and <title> tags were already inserted in the HTML file. Thirdly, I typed in <link rel="stylesheet" type="text/css" href="Lab_34.css"> inside the <head> tags to link the CSS file with my HTML file. Fourthly, I typed in <script src="Lab_34.js" type="text/javascript"></script> inside the <body> tags which linked my JavaScript file with my HTML file. Inside the <body> tags, I typed the heading for the lab which has my name, date, and lab number with <div id="heading"><h1>Lab 34</h1><h2>Wei Jian Zhen</h2><h3>12/24/2019</h3></div>. After that I typed in <div class="words" contenteditable></div> for the speech detection box. Lastly, I made the copyright notice with <p> and <div> tags. For the CSS I did html {width: 100%; height: auto;} body {background-color: #00FFA8; min-width: 100%; min-height: 100%;} to give the webpage a background color and make the webpage responsive to screen size changes. #heading {text-align: center; font-size: 16px;} to center the heading of the lab. #copyright {font-size: 16px; font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif"; font-weight: normal; padding-left: 1%; padding-right: 1%;} to change the font of the copyright notice. Then I did, .words {max-width: 500px; margin: 50px auto; background-color: white; border-radius: 5px; box-shadow: 10px 10px 0 rgba(0,0,0,0.1); padding: 1rem 2rem 1rem 5rem; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#d9eaf3), color-stop(4%, #fff)) 0 4px; background-size: 100% 3rem; position: relative; line-height: 3rem;} p {margin: 0 0 3rem;}.words:before {content: ''; position: absolute;width: 4px; top: 0; left: 30px;bottom: 0;border: 1px solid;border-color: transparent #efe4e4;} to stylize the speech detection box/main content. For the JavaScript, I typed in:
window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
const recognition = new SpeechRecognition();
recognition.interimResults = true;
recognition.lang = 'en-US';
let p = document.createElement('p');
const words = document.querySelector('.words');
words.appendChild(p);
recognition.addEventListener('result', e => {
const transcript = Array.from(e.results)
.map(result => result[0])
.map(result => result.transcript)
.join('');
const poopScript = transcript.replace(/poop|poo|shit|dump/gi, '💩');
p.textContent = poopScript;
if (e.results[0].isFinal) {
p = document.createElement('p');
words.appendChild(p);
}
});
recognition.addEventListener('end', recognition.start);
recognition.start();
This will result in the webpage detecting the audio. Knowing how to use speech detection software is useful in making websites accessible to people with disabilities.
Link:
http://techteach.us/Web2020/ZWeiJian/WCP/Labs/Lab_34/Lab_34.html
No comments:
Post a Comment