Дизайн
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());
    }
});