Skip to content

Commit 45c7dd6

Browse files
germanattanasiogermanattanasio
committed
feat(STT): Adds auto pause and multiple stream example
1 parent 9e1cd65 commit 45c7dd6

File tree

2 files changed

+139
-0
lines changed

2 files changed

+139
-0
lines changed

‎examples/static/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ <h3>Microphone Input</h3>
1919
<li><a href="microphone-streaming.html">Transcribe from Microphone</a></li>
2020
<li><a href="microphone-streaming-preload-token.html">Transcribe from Microphone, with pre-loaded token (compatible with iOS)</a></li>
2121
<li><a href="microphone-streaming-auto-stop.html">Transcribe from Microphone, automatically stop at first pause</a></li>
22+
<li><a href="microphone-streaming-auto-stop.html">Transcribe from Microphone, automatically stop at first pause and with multiple mediastream</a></li>
2223
<li><a href="microphone-streaming-model.html">Transcribe from Microphone, with chosen model</a></li>
2324
<li><a href="microphone-alternatives.html">Transcribe from Microphone, with Alternatives</a></li>
2425
<li><a href="microphone-word-confidence.html">Transcribe from Microphone, with Word Confidence</a></li>

‎examples/static/microphone-streaming-auto-stop-with-shared-mediastream.html‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>Watson Speech to Text client example</title>
7+
<link rel="stylesheet" href="style.css" />
8+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
9+
</head>
10+
11+
<body>
12+
<div class="container">
13+
<a href="/">&laquo; Examples</a>
14+
15+
<section>
16+
<h2>Transcribe from Microphone with auto stop</h2>
17+
<button id="button">Start Microphone Transcription</button>
18+
19+
<h2>Output:</h2>
20+
<div id="waveform">Waveform</div>
21+
<div id="output">Text</div>
22+
</section>
23+
24+
<script src="scripts/wavesurfer/dist/wavesurfer.min.js"></script>
25+
<script src="scripts/wavesurfer/dist/wavesurfer.microphone.min.js"></script>
26+
<script src="scripts/watson-speech/dist/watson-speech.js"></script>
27+
<!-- window.fetch pollyfill for IE/Edge & Older Chrome/FireFox -->
28+
<script src="scripts/fetch/dist/fetch.umd.js"></script>
29+
30+
<h2>Code for this demo:</h2>
31+
32+
<pre><code><script style="display: block;">
33+
34+
var speechToken;
35+
var wavesurfer;
36+
37+
document.querySelector('#button').onclick = function () {
38+
fetch('/api/speech-to-text/token')
39+
.then(function (response) {
40+
return response.json();
41+
}).then(function (token) {
42+
speechToken = token;
43+
wavesurfer = initMicrophoneVisualizer();
44+
wavesurfer.microphone.start();
45+
}).catch(function (error) {
46+
console.log(error);
47+
});
48+
};
49+
50+
function isSafari() {
51+
return /^((?!chrome|android).)*safari/i.test(navigator.userAgent || '') || /iPad|iPhone|iPod/i.test(navigator.userAgent || '');
52+
}
53+
54+
function initMicrophoneVisualizer() {
55+
56+
if (wavesurfer === undefined) {
57+
58+
var context, processor;
59+
var bufferSize = 4096;
60+
61+
if (!isSafari())
62+
barHeight = 2;
63+
else {
64+
barHeight = 8;
65+
bufferSize = 1024;
66+
67+
context = new (window.AudioContext || window.webkitAudioContext)();
68+
processor = context.createScriptProcessor(bufferSize, 1, 1);
69+
}
70+
71+
wavesurfer = WaveSurfer.create({
72+
container: '#waveform',
73+
waveColor: 'red',
74+
height: 100,
75+
interact: false,
76+
cursorWidth: 0,
77+
barHeight: barHeight,
78+
barRadius: 18,
79+
audioContext: context || null,
80+
audioScriptProcessor: processor || null,
81+
plugins: [
82+
WaveSurfer.microphone.create({
83+
bufferSize: bufferSize,
84+
numberOfInputChannels: 1,
85+
numberOfOutputChannels: 1,
86+
constraints: {
87+
video: false,
88+
audio: true
89+
}
90+
})
91+
]
92+
});
93+
94+
console.log('Microphone Initialized');
95+
96+
wavesurfer.microphone.on('deviceReady', function (stream) {
97+
console.log('Microphone Ready');
98+
console.log('Wavesurfer Stream: ' + stream.id);
99+
initiateSpeechVoiceEngine(stream);
100+
});
101+
wavesurfer.microphone.on('deviceError', function (code) {
102+
});
103+
wavesurfer.on('error', function (e) {
104+
});
105+
}
106+
107+
return wavesurfer;
108+
}
109+
110+
function initiateSpeechVoiceEngine(mediaStream) {
111+
112+
stream = WatsonSpeech.SpeechToText.recognizeMicrophone(Object.assign(speechToken, {
113+
mediaStream: mediaStream,
114+
outputElement: '#output'
115+
}));
116+
117+
console.log('SpeechToText initiliazed');
118+
119+
console.log('API Stream: ' + stream.options.mediaStream.id);
120+
121+
stream.on('data', function (data) {
122+
if (data.results[0] && data.results[0].final) {
123+
stream.stop();
124+
wavesurfer.microphone.stop();
125+
console.log('SpeechToText stoped.');
126+
}
127+
});
128+
129+
stream.on('error', function (err) {
130+
console.log(err);
131+
});
132+
}
133+
</script></code></pre>
134+
135+
</div>
136+
</body>
137+
138+
</html>

0 commit comments

Comments
 (0)