11_말하면 회의록이 작성되요!

Javascript

by 모모87 2021. 3. 13. 02:42

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Speech Detection</title>
    </head>
    <body>
        <div class="words" contenteditable>
            <h1>🗒 회의내용을 말해주세요!</h1>
        </div>

        <script>
            window.SpeechRecognition =
                window.SpeechRecognition || window.webkitSpeechRecognition;

            const recognition = new SpeechRecognition();
            recognition.interimResults = true;
            recognition.lang = 'ko';

            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();
        </script>

        <style>
            html {
                font-size: 10px;
            }

            body {
                background: #efefef;
                font-family: 'helvetica neue';
                font-weight: 200;
                font-size: 20px;
                display: flex;
                flex-direction: column;
                height: 100vh;
                padding: 0;
                justify-content: center;
            }

            .words {
                width: 100%;
                max-width: 500px;
                min-height: 50vh;
                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;
            }
        </style>
    </body>
</html>

'Javascript' 카테고리의 다른 글

13_자기소개 낙녹 (0)	2021.03.13
12_포인트 글! (0)	2021.03.13
10_웹캠사진찍기 (0)	2021.03.13
09_커스텀컨트롤플레이어 (0)	2021.03.13
08_캔버스그림 (0)	2021.03.13