Collaborama

Source: site.view [edit]
Function name:	test
Arguments:
Description:
Page type:	html
Render function:
Module:	sportstreak
Page source:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Voice Recognition and Playback</title>
</head>
<body>
    <button id="start-record-btn">Start Recording</button>
    <button id="playback-btn" disabled>Play Back</button>
    <script src="https://cdn.jsdelivr.net/npm/annyang@2.6.1/dist/annyang.min.js"></script>
    <script>
        const startRecordBtn = document.getElementById('start-record-btn');
        const playbackBtn = document.getElementById('playback-btn');
        let recordedText = '';

        if (annyang) {
            const commands = {
                '*text': (text) => {
                    recordedText = text;
                    playbackBtn.disabled = false;
                }
            };

            annyang.addCommands(commands);

            startRecordBtn.addEventListener('click', () => {
                annyang.start({ autoRestart: false, continuous: false });
            });
        } else {
            console.warn('Speech recognition is not supported in this browser.');
        }

        playbackBtn.addEventListener('click', () => {
            playBack();
        });

        function playBack() {
            const utterance = new SpeechSynthesisUtterance(recordedText);
            utterance.lang = 'en-US';
            window.speechSynthesis.speak(utterance);
        }
    </script>
</body>
</html>