13_자기소개 낙녹

Javascript

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

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8" />
        <title>자기소개 해보겠습니다.</title>
        <link
            href="https://fonts.googleapis.com/css?family=Pacifico"
            rel="stylesheet"
            type="text/css"
        />
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <div class="voiceinator">
            <h1>목소리가 나와요 !</h1>

            <select name="voice" id="voices">
                <option value="">Select A Voice</option>
            </select>

            <label for="rate">Rate:</label>
            <input
                name="rate"
                type="range"
                min="0"
                max="3"
                value="1"
                step="0.1"
            />

            <label for="pitch">Pitch:</label>

            <input name="pitch" type="range" min="0" max="2" step="0.1" />
            <textarea name="text">
안녕하세요. 프론트앤드 개발자 나윤주입니다.
현재 퍼블리셔와 프론트 영역까지 꿈꾸며 개발자와의 소통을 위해 현재에 안주하지 않고 열심히 배우는 중입니다.
저는 기존에 인하우스 디자이너로 시작해서 다양한 경험을 통해 웹개발에 흥미를 느껴 도전하게 되었습니다.
웹사이트 / 모바일앱 / 자바스크립트 / 애니메이션 을 공부하면서 웹과 앱 개발에 있어 전문가로 성장하기 위해 노력 중입니다.
</textarea
            >
            <button id="stop">멈추기</button>
            <button id="speak">말하기</button>
        </div>

        <script>
            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('ko'))
                    .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));
        </script>
    </body>
</html>

'Javascript' 카테고리의 다른 글

15_타이머 (0)	2021.03.13
14_뮤직플레이어 (0)	2021.03.13
12_포인트 글! (0)	2021.03.13
11_말하면 회의록이 작성되요! (0)	2021.03.13
10_웹캠사진찍기 (0)	2021.03.13