In this lab, I followed the instruction from JavaScript30 and recreated the Speech Synthesis 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_37.css"> inside the <head> tags to link the CSS file with my HTML file. Fourthly, I typed in <script src="Lab_37.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 37</h1><h2>Wei Jian Zhen</h2><h3>12/24/2019</h3></div>. Next I typed in <option>, <select>, <h1>, and div tags that created the form. 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. .voiceinator {padding: 2rem; width: 50rem; margin: 0 auto; border-radius: 1rem; position: relative; background: white; overflow: hidden; z-index: 1; box-shadow: 0 0 5px 5px rgba(0,0,0,0.1);} to give the content a background, size, and positioning. h1 {width: calc(100% + 4rem); margin: -2rem 0 2rem -2rem; padding: .5rem; background: #ffc600; border-bottom: 5px solid #F3C010; text-align: center; font-size: 5rem; font-weight: 100; font-family: 'Pacifico', cursive; text-shadow: 3px 3px 0 #F3C010; to stylize the <h1> tags. .voiceinator input, .voiceinator button, .voiceinator select, .voiceinator textarea {width: 100%; display: block; margin: 10px 0; padding: 10px; border: 0; font-size: 2rem; background: #F7F7F7; outline: 0;} textarea {height: 20rem;} input[type="select"] {} .voiceinator button {background: #ffc600; border: 0; width: 49%; float: left; font-family: 'Pacifico', cursive; margin-bottom: 0; font-size: 2rem; border-bottom: 5px solid #F3C010; cursor: pointer; position: relative;} .voiceinator button:active {top: 2px;} .voiceinator button:nth-of-type(1) {margin-right: 2%;} to make the content inside the <div> tags more colorful and easy on the eyes. For the JavaScript, I typed in:
const msg = new SpeechSynthesisUtterance();
let voices = [];
const voicesDropdown = document.querySelector('[name="voice"]');
const options = document.querySelectorAll('[type="range"], [name="text"]');
const speakButton = document.querySelector('#speak');
const stopButton = document.querySelector('#stop');
msg.text = document.querySelector('[name="text"]').value;
function populateVoices() {
voices = this.getVoices();
voicesDropdown.innerHTML = voices
.filter(voice => voice.lang.includes('en'))
.map(voice => `<option value="${voice.name}">${voice.name} (${voice.lang})</option>`)
.join('');
}
function setVoice() {
msg.voice = voices.find(voice => voice.name === this.value);
toggle();
}
function toggle(startOver = true) {
speechSynthesis.cancel();
if (startOver) {
speechSynthesis.speak(msg);
}
}
function setOption() {
console.log(this.name, this.value);
msg[this.name] = this.value;
toggle();
}
speechSynthesis.addEventListener('voiceschanged', populateVoices);
voicesDropdown.addEventListener('change', setVoice);
options.forEach(option => option.addEventListener('change', setOption));
speakButton.addEventListener('click', toggle);
stopButton.addEventListener('click', () => toggle(false));
This makes the input form make the the webpage speak with audio. Knowing how to use speech synthesis is useful to a web designer because it gives accessibility to people of disabilities.
Link:
http://techteach.us/Web2020/ZWeiJian/WCP/Labs/Lab_37/Lab_37.html
No comments:
Post a Comment