Hugging Face's logo

Spaces:
JPLTedCas
/
ASRinServer
Sleeping

App Files Community
JPLTedCas commited on
Commit
7eaa876
•
1 Parent(s): 8f9cdf5

Upload 2 files

Browse files
Files changed (2) hide show
  1. static/index.html +63 -0
  2. static/js/app.js +195 -0
static/index.html ADDED
@@ -0,0 +1,63 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>Web Speech Recorder</title>
6
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
7
+ </head>
8
+ <body>
9
+ <p>
10
+ <button id="startRecording">Start recording</button>
11
+ <button id="stopRecording" disabled>Stop recording</button>
12
+ </p>
13
+ </body>
14
+ <script>
15
+ navigator
16
+ .mediaDevices
17
+ .getUserMedia({ audio: true })
18
+ .then(stream => { handlerFunction(stream) });
19
+
20
+ function handlerFunction(stream) {
21
+ rec = new MediaRecorder(stream);
22
+ rec.ondataavailable = e => {
23
+ audioChunks.push(e.data);
24
+ if (rec.state == "inactive") {
25
+ let blob = new Blob(audioChunks, { type: 'audio/mpeg-3' });
26
+ sendData(blob);
27
+ }
28
+ }
29
+ }
30
+
31
+ function sendData(data) {
32
+ var form = new FormData();
33
+ form.append('file', data, 'data.mp3');
34
+ form.append('title', 'data.mp3');
35
+ //Chrome inspector shows that the post data includes a file and a title.
36
+ $.ajax({
37
+ type: 'POST',
38
+ url: '/save-record',
39
+ data: form,
40
+ cache: false,
41
+ processData: false,
42
+ contentType: false
43
+ }).done(function (data) {
44
+ console.log(data);
45
+ });
46
+ }
47
+
48
+ startRecording.onclick = e => {
49
+ console.log('Recording are started..');
50
+ startRecording.disabled = true;
51
+ stopRecording.disabled = false;
52
+ audioChunks = [];
53
+ rec.start();
54
+ };
55
+
56
+ stopRecording.onclick = e => {
57
+ console.log("Recording are stopped.");
58
+ startRecording.disabled = false;
59
+ stopRecording.disabled = true;
60
+ rec.stop();
61
+ };
62
+ </script>
63
+ </html>
static/js/app.js ADDED
@@ -0,0 +1,195 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ //webkitURL is deprecated but nevertheless
2
+ URL = window.URL || window.webkitURL;
3
+
4
+ var gumStream; //stream from getUserMedia()
5
+ var rec; //Recorder.js object
6
+ var input; //MediaStreamAudioSourceNode we'll be recording
7
+
8
+ // shim for AudioContext when it's not avb.
9
+ var AudioContext = window.AudioContext || window.webkitAudioContext;
10
+ var audioContext //audio context to help us record
11
+
12
+ var recordButton = document.getElementById("recordButton");
13
+ var stopButton = document.getElementById("stopButton");
14
+ var pauseButton = document.getElementById("pauseButton");
15
+
16
+ //add events to those 2 buttons
17
+ recordButton.addEventListener("click", startRecording);
18
+ stopButton.addEventListener("click", stopRecording);
19
+ pauseButton.addEventListener("click", pauseRecording);
20
+
21
+ function startRecording() {
22
+ console.log("recordButton clicked");
23
+
24
+ /*
25
+ Simple constraints object, for more advanced audio features see
26
+ https://addpipe.com/blog/audio-constraints-getusermedia/
27
+ */
28
+
29
+ var constraints = { audio: true, video: false }
30
+
31
+ /*
32
+ Disable the record button until we get a success or fail from getUserMedia()
33
+ */
34
+
35
+ recordButton.disabled = true;
36
+ stopButton.disabled = false;
37
+ pauseButton.disabled = false
38
+
39
+ /*
40
+ We're using the standard promise based getUserMedia()
41
+ https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
42
+ */
43
+
44
+ navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {
45
+ console.log("getUserMedia() success, stream created, initializing Recorder.js ...");
46
+
47
+ /*
48
+ create an audio context after getUserMedia is called
49
+ sampleRate might change after getUserMedia is called, like it does on macOS when recording through AirPods
50
+ the sampleRate defaults to the one set in your OS for your playback device
51
+
52
+ */
53
+ audioContext = new AudioContext();
54
+
55
+ //update the format
56
+ document.getElementById("formats").innerHTML = "Format: 1 channel pcm @ " + audioContext.sampleRate / 1000 + "kHz"
57
+
58
+ /* assign to gumStream for later use */
59
+ gumStream = stream;
60
+
61
+ /* use the stream */
62
+ input = audioContext.createMediaStreamSource(stream);
63
+
64
+ /*
65
+ Create the Recorder object and configure to record mono sound (1 channel)
66
+ Recording 2 channels will double the file size
67
+ */
68
+ rec = new Recorder(input, { numChannels: 1 })
69
+
70
+ //start the recording process
71
+ rec.record()
72
+
73
+ console.log("Recording started");
74
+
75
+ }).catch(function (err) {
76
+ //enable the record button if getUserMedia() fails
77
+ recordButton.disabled = false;
78
+ stopButton.disabled = true;
79
+ pauseButton.disabled = true
80
+ });
81
+ }
82
+
83
+ function pauseRecording() {
84
+ console.log("pauseButton clicked rec.recording=", rec.recording);
85
+ if (rec.recording) {
86
+ //pause
87
+ rec.stop();
88
+ pauseButton.innerHTML = "Resume";
89
+ } else {
90
+ //resume
91
+ rec.record()
92
+ pauseButton.innerHTML = "Pause";
93
+
94
+ }
95
+ }
96
+
97
+ function stopRecording() {
98
+ console.log("stopButton clicked");
99
+
100
+ //disable the stop button, enable the record too allow for new recordings
101
+ stopButton.disabled = true;
102
+ recordButton.disabled = false;
103
+ pauseButton.disabled = true;
104
+
105
+ //reset button just in case the recording is stopped while paused
106
+ pauseButton.innerHTML = "Pause";
107
+
108
+ //tell the recorder to stop the recording
109
+ rec.stop();
110
+
111
+ //stop microphone access
112
+ gumStream.getAudioTracks()[0].stop();
113
+
114
+ //create the wav blob and pass it on to createDownloadLink
115
+ rec.exportWAV(createDownloadLink);
116
+ }
117
+
118
+ function createDownloadLink(blob) {
119
+
120
+ var url = URL.createObjectURL(blob);
121
+ var au = document.createElement('audio');
122
+ var li = document.createElement('li');
123
+ var link = document.createElement('a');
124
+
125
+ //name of .wav file to use during upload and download (without extendion)
126
+ var filename = new Date().toISOString();
127
+
128
+ //add controls to the <audio> element
129
+ au.controls = true;
130
+ au.src = url;
131
+
132
+ //save to disk link
133
+ link.href = url;
134
+ link.download = filename + ".wav"; //download forces the browser to donwload the file using the filename
135
+ link.innerHTML = "Save to disk";
136
+
137
+ //add the new audio element to li
138
+ li.appendChild(au);
139
+
140
+ //add the filename to the li
141
+ li.appendChild(document.createTextNode(filename + ".wav "))
142
+
143
+ //add the save to disk link to li
144
+ li.appendChild(link);
145
+
146
+ //upload link
147
+ var upload = document.createElement('a');
148
+ upload.href = "#";
149
+ upload.innerHTML = "Upload";
150
+ upload.addEventListener("click", function (event) {
151
+ var xhr = new XMLHttpRequest();
152
+ xhr.onload = function (e) {
153
+ if (this.readyState === 4) {
154
+ console.log("Server returned: ", e.target.responseText);
155
+ }
156
+ };
157
+
158
+ // Supongamos que "data" es una cadena de bytes en formato WAV
159
+ var formData = new FormData();
160
+ // Supongamos que "audioBlob" es un objeto Blob que contiene el audio WAV
161
+ formData.append("audio_data", blob, "archivo.wav");
162
+ xhr.open("POST", "/", true);
163
+ xhr.onreadystatechange = function () {
164
+ if (xhr.readyState === 4 && xhr.status === 200) {
165
+ // Manejar la respuesta del servidor
166
+ console.log("Respuesta del servidor:", xhr.responseText);
167
+ ////////////////////////////////////////////////////////
168
+ // Muestra el resultado del reconocimiento en el cuadro de texto
169
+ //document.getElementById("responseTextBox").value = xhr.responseText;
170
+ // Buscar el contenido dentro de las etiquetas <p></p>
171
+ var parser = new DOMParser();
172
+ var responseHTML = parser.parseFromString(xhr.responseText, 'text/html');
173
+ var paragraphContent = responseHTML.querySelector('p').textContent;
174
+
175
+ // Muestra el resultado del reconocimiento en el cuadro de texto
176
+ //document.getElementById("responseTextBox").value = paragraphContent;
177
+ // Muestra el resultado del reconocimiento como texto plano
178
+ var textElement = document.getElementById("textElement"); // Reemplaza "textElement" con el ID adecuado
179
+ textElement.textContent = paragraphContent;
180
+ //////////////////////////////////////////////////////////
181
+ }
182
+ };
183
+ xhr.send(formData);
184
+ })
185
+ li.appendChild(document.createTextNode(" "))//add a space in between
186
+ li.appendChild(upload)//add the upload link to li
187
+
188
+ //add the li element to the ol
189
+ recordingsList.appendChild(li);
190
+
191
+
192
+
193
+
194
+
195
+ }