ChatGPT용 음성 인식 앱을 만들기 위한 JavaScript 코드?

ChatGPT용 음성 인식 앱을 만들기 위한 JavaScript 코드?

음성인식으로 앱을 만들려면, 웹 음성 인식 API를 사용할 수 있습니다, 최신 브라우저에서 사용 가능. 다음은 사용자의 음성을 인식하고 기록된 텍스트를 표시하는 간단한 앱을 만드는 HTML 및 JavaScript 코드의 예입니다.:

html코드 복사

<!DOCTYPE html>
<html>
<head>
    <title>Riconoscimento Vocale</title>
</head>
<body>
    <h1>Riconoscimento Vocale</h1>
    
    <button id="start-recognition">Avvia Riconoscimento</button>
    <div id="transcription"></div>

    <script>
        // Controlla se il browser supporta l'API di riconoscimento vocale
        if ('webkitSpeechRecognition' in window) {
            const recognition = new webkitSpeechRecognition();

            // Imposta alcune opzioni per il riconoscimento
            recognition.continuous = true;
            recognition.interimResults = true;
            recognition.lang = 'it-IT'; // Puoi impostare la lingua desiderata

            const startButton = document.getElementById('start-recognition');
            const transcription = document.getElementById('transcription');

            startButton.addEventListener('click', function() {
                startButton.disabled = true;
                recognition.start();
            });

            // Gestisci i risultati del riconoscimento
            recognition.onresult = function(event) {
                const result = event.results[event.results.length - 1];
                const transcript = result[0].transcript;
                transcription.innerHTML = transcript;
            };

            // Gestisci gli errori
            recognition.onerror = function(event) {
                console.error('Errore di riconoscimento vocale:', event.error);
            };

            // Termina il riconoscimento quando si preme il pulsante di avvio nuovamente
            recognition.onend = function() {
                startButton.disabled = false;
            };
        } else {
            alert('Il tuo browser non supporta l\'API di riconoscimento vocale.');
        }
    </script>
</body>
</html>

이 예에서는, 우리에겐 버튼이 있어요 “인식 시작” 누르면 음성 인식 API가 실행됩니다.. 복사된 텍스트가 항목에 표시됩니다. <div> 사기꾼 “전사”. 설정을 통해 언어를 맞춤설정할 수 있습니다. recognition.lang 원하는 언어로.

Web Speech Recognition API를 지원하는 환경에서 이 코드를 사용해야 합니다., 최신 브라우저처럼. 사용자 경험은 브라우저와 선택한 언어에 따라 다를 수 있습니다..

이 예는 어떤 브라우저와 호환됩니까??

이전 메시지에 제공된 음성 인식 예제에서는 API를 사용합니다. webkitSpeechRecognition, 이는 Chrome 브라우저에만 해당됩니다.. 그러므로, 이 특정 예는 Google Chrome 브라우저와만 호환됩니다..

하지만, 음성 인식 API와의 호환성은 브라우저와 버전에 따라 다릅니다.. 더 넓은 범위의 브라우저와의 호환성을 보장하기 위해, 표준 음성 인식 API를 사용할 수 있습니다 (SpeechRecognition) 오히려 webkitSpeechRecognition. 다음은 표준 API를 사용하도록 코드를 수정하는 방법에 대한 예입니다.:

javascript코드 복사

if ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window) {
    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
    const recognition = new SpeechRecognition();
    // ...
}

사용 window.SpeechRecognition || window.webkitSpeechRecognition, 표준 API를 사용하는 브라우저를 지원할 수 있습니다 (예를 들어, 파이어폭스) 웹킷 접두사 버전을 사용하는 사람들 (크롬으로 오세요).

하지만, API 구현 및 언어 지원은 브라우저마다 다를 수 있습니다.. 그러므로, 최상의 사용자 경험을 보장하려면 다양한 브라우저에서 음성 인식을 주의 깊게 테스트하는 것이 중요합니다..

SpeechRecognition을 지원하는 브라우저?

9월 2021, 음성 인식 API (SpeechRecognition) 여러 브라우저에서 지원되었습니다, 그러나 구체적인 지원은 브라우저와 플랫폼에 따라 다를 수 있습니다.. 다음은 이 API를 지원하는 주요 브라우저 중 일부입니다.:

구글 크롬: Chrome은 음성 인식 API를 훌륭하게 지원합니다.. API가 Chrome에 도입되었습니다. 25 시간이 지남에 따라 지원이 꾸준히 개선되었습니다..
모질라 파이어폭스: Firefox는 릴리스부터 음성 인식 API를 지원하기 시작했습니다. 44. 하지만, 지원을 받으려면 브라우저 설정에서 수동 활성화가 필요할 수 있습니다..
마이크로소프트 엣지: Microsoft Edge는 음성 인식 API도 지원하기 시작했습니다.. 지원은 브라우저 버전에 따라 다를 수 있습니다..
원정 여행: Apple의 Safari는 iOS와 같은 플랫폼에서 음성 인식 API를 지원합니다..
오페라: Opera는 음성 인식 API도 지원합니다., 그러나 구체적인 지원은 버전에 따라 다를 수 있습니다..

특정 언어 및 기능 지원은 브라우저마다 다를 수 있다는 점에 유의하는 것이 중요합니다.. 뿐만 아니라, Chrome 및 Safari와 같은 모바일 브라우저는 종종 모바일 장치에서 음성 인식 API를 지원합니다..

새로운 버전과 표준이 도입되면서 브라우저 지원이 시간이 지남에 따라 변경될 수 있으므로, 브라우저 설명서를 확인하고 지원하려는 특정 브라우저에서 API를 주의 깊게 테스트하는 것이 좋습니다..