device-backend/test_speech_to_text.html at main · HSU-ThePathWeAreGoingToWalk/device-backend · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>음성 인식 테스트</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
        }

        button {
            padding: 10px 15px;
            margin: 5px;
            cursor: pointer;
        }

        #result {
            margin-top: 20px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            min-height: 100px;
        }

        .recording {
            background-color: #ff4d4d;
            color: white;
        }
    </style>
</head>

<body>
    <h1>음성 인식 테스트</h1>
    <p>음성 녹음 후 서버에 전송하여 텍스트로 변환합니다.</p>

    <div>
        <button id="recordButton">녹음 시작</button>
        <button id="stopButton" disabled>녹음 중지</button>
        <button id="sendButton" disabled>서버로 전송</button>
    </div>

    <div>
        <h3>변환된 텍스트:</h3>
        <div id="result">(여기에 결과가 표시됩니다)</div>
    </div>

    <script>
        let mediaRecorder;
        let audioChunks = [];
        let audioBlob = null;

        const recordButton = document.getElementById('recordButton');
        const stopButton = document.getElementById('stopButton');
        const sendButton = document.getElementById('sendButton');
        const resultDiv = document.getElementById('result');

        // 녹음 시작
        recordButton.addEventListener('click', async () => {
            try {
                const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
                mediaRecorder = new MediaRecorder(stream);

                mediaRecorder.ondataavailable = (event) => {
                    if (event.data.size > 0) {
                        audioChunks.push(event.data);
                    }
                };

                mediaRecorder.onstop = () => {
                    audioBlob = new Blob(audioChunks, { type: 'audio/webm' });
                    sendButton.disabled = false;

                    // 녹음된 오디오 미리듣기 추가 (선택사항)
                    const audioUrl = URL.createObjectURL(audioBlob);
                    const audio = new Audio(audioUrl);
                    audio.controls = true;
                    document.body.appendChild(audio);
                };

                audioChunks = [];
                mediaRecorder.start();

                recordButton.disabled = true;
                stopButton.disabled = false;
                recordButton.classList.add('recording');
                resultDiv.textContent = '녹음 중...';

            } catch (error) {
                console.error('마이크 접근 오류:', error);
                alert('마이크에 접근할 수 없습니다. 마이크 권한을 확인해주세요.');
            }
        });

        // 녹음 중지
        stopButton.addEventListener('click', () => {
            if (mediaRecorder && mediaRecorder.state !== 'inactive') {
                mediaRecorder.stop();

                // 트랙 중지로 마이크 해제
                mediaRecorder.stream.getTracks().forEach(track => track.stop());

                recordButton.disabled = false;
                stopButton.disabled = true;
                recordButton.classList.remove('recording');
                resultDiv.textContent = '녹음 완료. 서버로 전송하려면 "서버로 전송" 버튼을 클릭하세요.';
            }
        });

        // 서버로 전송
        sendButton.addEventListener('click', async () => {
            if (!audioBlob) {
                alert('녹음된 오디오가 없습니다.');
                return;
            }

            try {
                resultDiv.textContent = '서버에 전송 중...';

                // FormData 생성
                const formData = new FormData();
                formData.append('audio_file', audioBlob, 'recording.webm');
                formData.append('language', 'ko-KR');

                // 백엔드 서버 URL (여기서는 로컬 서버 예시)
                const response = await fetch('http://localhost:8000/audio/speech-to-text', {
                    method: 'POST',
                    body: formData
                });

                if (!response.ok) {
                    throw new Error(`서버 응답 오류: ${response.status}`);
                }

                const data = await response.json();

                // 결과 표시
                if (data.success) {
                    resultDiv.textContent = `변환된 텍스트: ${data.text}`;
                } else {
                    resultDiv.textContent = `오류: ${data.detail || '알 수 없는 오류'}`;
                }

            } catch (error) {
                console.error('서버 요청 오류:', error);
                resultDiv.textContent = `오류: ${error.message}`;
            }
        });
    </script>
</body>

</html>