speech2text
speech2text is a client plugin which using WebSocket to communicate with Google Cloud Speech API backend. Result of successful connection is Speech to Text response to client frontend. Custom backend on WebSocket protocol is required.
installation
npm install @comsultia/speech2textusage
In gulpfile.js add build.js to your array of JS files (or whatever you like):
const jsFiles = [
'./node_modules/@comsultia/speech2text/dist/bundle.js',
'./public/src/js/custom.js'
];example available in 'node_modules/@comsultia/speech2text/gulpfile.js'
In your html add build of js files and initialize speech2text plugin
<!DOCTYPE html>
<html>
<head>
<title>WebSocket Google Speech To Text</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<script src="./public/js/complete.min.js"></script>
</head>
<body>
<main>
<h1>WebSocket Google Speech To Text</h1>
<div class="recorder">
<div class="recorder-buttons">
<button id="btn-start-recording" class="btn-start-recording">Start</button>
<button id="btn-stop-recording" class="btn-stop-recording" disabled>Stop</button>
</div>
<div id="result-wrapper" class="result-wrapper">
<div class="loading-holder"></div>
<h2>Result:</h2>
<div id="result" class="result"></div>
</div>
</div>
</main>
<script>
let loadingHolder = document.querySelector('.loading-holder');
// init Speech to Text plugin
speech2text.init({
debug: true, // true if devel mode
url: 'wss://xx.dev.domain.sk:{PORT}/nodejs/',
elementStart: '#btn-start-recording',
elementStop: '#btn-stop-recording',
elementResult: '#result',
defaultTimeout: 3000,
onConnecting: function() {
console.log('waiting for websocket connection....');
},
onConnection: function() {
console.log('websocket connected....');
},
onNotSupported: function() {
console.log('web audio not supported');
},
onStart: function() {
loadingHolder.classList.add('speech-loading');
},
onBlock: function() {
console.log('microphone blocked');
},
onError: function() {
console.log('websocket connection error');
},
onEnd: function() {
loadingHolder.classList.remove('speech-loading');
}
});
</script>
</body>
</html>example available in 'node_modules/@comsultia/speech2text/index.html'
parameters
debug: true || false (required)
url: url to your WebSocket backend (required)
elementStart: querySelector of recording start button element (required)
elementStop: querySelector of recording stop button element (required)
elementResult: querySelector of result holder element (required)
defaultTimeout: number of miliseconds for waiting on last word to stop, 4000ms is default value (optional)
onConnecting: callback on starting connecting with WebSocket (optional)
onConnection: callback on successfull connection with WebSocket (optional)
onNotSupported: callback on web audio not supported in selected browser (optional)
onStart: callback on start of recording (optional)
onBlock: callback on microphone block (optional)
onError: callback on error connecting with WebSocket (optional)
onEnd: callback on close WebSocket and end of recording (optional)
demo
availbale in 'node_modules/@comsultia/speech2text'
open 'index.html' in your browser and check browser console with all events logs (don't forget to change url of your websocket backend)