Hugging Face's logo

Spaces:
robinhad
/
ukrainian-stt
Running

App Files Community
Yurii Paniv commited on
Commit
98a1ca0
•
1 Parent(s): e0a3506

Animate user flow

Browse files
Files changed (1) hide show
  1. templates/hello.html +9 -12
templates/hello.html CHANGED
@@ -12,7 +12,7 @@
12
  <body>
13
  <h1>Audio Recording Test</h1>
14
  <p>Talk for 3 seconds, then you will hear your recording played back</p>
15
- <button class="btn btn-primary" id="action" onclick="handleAction()">Start recording...</button>
16
  <div id="result"></div>
17
  <script src="https://cdn.rawgit.com/mattdiamond/Recorderjs/08e7abd9/dist/recorder.js"></script>
18
  <script>
@@ -23,12 +23,15 @@
23
  // shim for AudioContext when it's not avb.
24
  var AudioContext = window.AudioContext || window.webkitAudioContext;
25
  var audioContext; //audio context to help us record
26
- var resultNode = document.getElementById('result');
 
27
 
28
  function resultProcess(data) {
29
  resultNode.textContent = `Довжина тексту: ${data.length} \n
30
  Текст: ${data}
31
- `
 
 
32
  }
33
 
34
  function exportWAV(blob) {
@@ -39,10 +42,11 @@
39
  .then(resultProcess);
40
  }
41
  function record() {
 
42
  var constraints = { audio: true, video: false }
43
  navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {
44
- console.log("getUserMedia() success, stream created, initializing Recorder.js ...");
45
-
46
  /*
47
  create an audio context after getUserMedia is called
48
  sampleRate might change after getUserMedia is called, like it does on macOS when recording through AirPods
@@ -64,8 +68,6 @@
64
 
65
  //start the recording process
66
  rec.record()
67
-
68
- console.log("Recording started");
69
  sleep(3000).then(stop);
70
  })
71
  }
@@ -79,18 +81,13 @@
79
 
80
  //create the wav blob and pass it on to createDownloadLink
81
  rec.exportWAV(exportWAV);
82
- console.log("Recording stopped")
83
-
84
  }
85
 
86
 
87
  const sleep = time => new Promise(resolve => setTimeout(resolve, time));
88
 
89
  async function handleAction() {
90
- const actionButton = document.getElementById('action');
91
- actionButton.disabled = true;
92
  record();
93
- actionButton.disabled = false;
94
  }
95
  </script>
96
  </body>
 
12
  <body>
13
  <h1>Audio Recording Test</h1>
14
  <p>Talk for 3 seconds, then you will hear your recording played back</p>
15
+ <button class="btn btn-primary" id="action" onclick="handleAction()">Start recording (3 sec)</button>
16
  <div id="result"></div>
17
  <script src="https://cdn.rawgit.com/mattdiamond/Recorderjs/08e7abd9/dist/recorder.js"></script>
18
  <script>
 
23
  // shim for AudioContext when it's not avb.
24
  var AudioContext = window.AudioContext || window.webkitAudioContext;
25
  var audioContext; //audio context to help us record
26
+ const resultNode = document.getElementById('result');
27
+ const actionButton = document.getElementById('action');
28
 
29
  function resultProcess(data) {
30
  resultNode.textContent = `Довжина тексту: ${data.length} \n
31
  Текст: ${data}
32
+ `;
33
+ actionButton.textContent = "Start recording (3 sec)";
34
+ actionButton.disabled = false;
35
  }
36
 
37
  function exportWAV(blob) {
 
42
  .then(resultProcess);
43
  }
44
  function record() {
45
+
46
  var constraints = { audio: true, video: false }
47
  navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {
48
+ actionButton.textContent = "Recording..."
49
+ actionButton.disabled = true;
50
  /*
51
  create an audio context after getUserMedia is called
52
  sampleRate might change after getUserMedia is called, like it does on macOS when recording through AirPods
 
68
 
69
  //start the recording process
70
  rec.record()
 
 
71
  sleep(3000).then(stop);
72
  })
73
  }
 
81
 
82
  //create the wav blob and pass it on to createDownloadLink
83
  rec.exportWAV(exportWAV);
 
 
84
  }
85
 
86
 
87
  const sleep = time => new Promise(resolve => setTimeout(resolve, time));
88
 
89
  async function handleAction() {
 
 
90
  record();
 
91
  }
92
  </script>
93
  </body>