File size: 3,315 Bytes
0a8e2ef
123aebe
0a8e2ef
 
c758190
 
0a8e2ef
 
 
 
 
 
 
 
 
 
5527542
2a39528
5527542
c758190
 
 
2a39528
 
c758190
 
 
 
 
 
 
 
5527542
0a8e2ef
 
c758190
0a8e2ef
 
 
 
5527542
c758190
0a8e2ef
123aebe
5527542
123aebe
0a8e2ef
 
c758190
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
99e691c
0a8e2ef
123aebe
0a8e2ef
 
c758190
0a8e2ef
5527542
0a8e2ef
c758190
 
 
 
 
 
0a8e2ef
 
 
 
 
c758190
 
0a8e2ef
 
c758190
0a8e2ef
 
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
let isRecording = false;
let mediaRecorder;
let recordedChunks = [];

// Handles the recording button click event
document.getElementById('recordButton').addEventListener('click', function () {
    if (!isRecording) {
        startRecording();
    } else {
        stopRecording();
    }
});

function startRecording() {
    navigator.mediaDevices.getUserMedia({ audio: true })
        .then(function (stream) {
            mediaRecorder = new MediaRecorder(stream, { mimeType: 'audio/webm' });

            mediaRecorder.ondataavailable = function (e) {
                if (e.data.size > 0) {
                    recordedChunks.push(e.data);
                }
            };

            mediaRecorder.start();
            console.log("Recording started");

            // Update button text and style
            document.getElementById('recordButton').textContent = 'Stop';
            document.getElementById('recordButton').classList.add('recording');
            document.getElementById('recordStatus').textContent = 'Recording...';
            document.getElementById('transcribeContainer').style.display = 'none'; // Hide Transcribe button initially
            isRecording = true;
        })
        .catch(function (err) {
            console.error('Error accessing media devices: ', err);
        });
}

function stopRecording() {
    mediaRecorder.stop();
    console.log("Recording stopped");

    mediaRecorder.onstop = function () {
        const blob = new Blob(recordedChunks, { type: 'audio/webm' });
        recordedChunks = [];
        const audioURL = window.URL.createObjectURL(blob);

        console.log(`Blob size: ${blob.size} bytes`); // Debugging statement
        console.log(`Audio URL: ${audioURL}`); // Debugging statement

        // Optionally, add a debug audio player to check if recording is valid
        const debugAudio = document.createElement('audio');
        debugAudio.controls = true;
        debugAudio.src = audioURL;
        document.body.appendChild(debugAudio);

        // Update button text and style
        document.getElementById('recordButton').textContent = 'Start';
        document.getElementById('recordButton').classList.remove('recording');
        document.getElementById('recordStatus').textContent = 'Tap to Record';
        document.getElementById('transcribeContainer').style.display = 'block'; // Show Transcribe button

        // Set up the Transcribe button click event
        document.getElementById('transcribeButton').addEventListener('click', function () {
            transcribeAudio(blob);
        });

        isRecording = false;
    };
}

function transcribeAudio(blob) {
    const formData = new FormData();
    formData.append('audio', blob, 'audio.webm');

    // Log FormData entries for debugging
    for (const [key, value] of formData.entries()) {
        console.log(`${key}: ${value}`);
    }

    fetch('https://jikoni-semabox.hf.space/transcribe', { 
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        console.log(data); // Debugging statement
        document.getElementById('output').textContent = data.transcription || 'No transcription available';
    })
    .catch(error => {
        console.error('Error during transcription:', error);
    });
}