[Javascript]

The code below will take in audio input and display it to the line. Using code below.

//To DO

Within the Script tags, when user says the word "hello" the response "hi" will be displayed on the line.

----------------------------

window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;

const recognition = new SpeechRecognition();

recognition.interimResults = true;

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('')

p.textContent = transcript;

if(e.results[0].isFinal) {

p = document.createElement('p');

words.appendChild(p);

}

if (transcript.includes('hello')){

console.log('hi');

}

console.log(transcript);

})

recognition.addEventListener('end', recognition.start)

recognition.start();

html {

font-size: 10px;

}

body {

background: #ffc600;

font-family: 'helvetica neue';

font-weight: 200;

font-size: 20px;

}

.words {

max-width: 500px;

margin: 50px auto;

background: white;

border-radius: 5px;

box-shadow: 10px 10px 0 rgba(0,0,0,0.1);

padding: 1rem 2rem 1rem 5rem;

background: -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;

}

hello Computer: Hi