Дизайн
August 8, 2018
Вторая работа
Опа! Опа!
Вот такая вот хуйня!
Ага
window.addEventListener("DOMContentLoaded", () => {
//Check that page is not running in a CodePen preview iframe
if (!document.body.hasAttribute('translate')) {
//Set speech recognition
window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
const recognition = new SpeechRecognition(),
padlock = document.querySelector('.padlock'),
openSound = document.querySelector('.padlock-open'),
closeSound = document.querySelector('.padlock-close'),
heardOutput = document.querySelector('.heard-output'),
openPadlock = () => {
padlock.classList.add('unlock');
openSound.play();
},
closePadlock = () => {
padlock.classList.remove('unlock');
closeSound.play();
};
//Start speech recognition
recognition.start();
//Listen for when the user finishes talking
recognition.addEventListener('result', e => {
//Get transcript of user speech
const transcript = e.results[0][0].transcript.toLowerCase().replace(/\s/g, '');
//Output transcript
heardOutput.textContent = transcript;
//Check if transcript is valid
if (transcript === 'unlock' && !padlock.classList.contains('unlock')) {
openPadlock();
} else {
if (transcript === 'lock' && padlock.classList.contains('unlock')) {
closePadlock();
}
}
});
//Restart speech recognition after user has finished talking
recognition.addEventListener('end', recognition.start);
//Click padlock to open/close
padlock.addEventListener('click', () => padlock.classList.contains('unlock') ? closePadlock() : openPadlock());
}
});