Library is created for implementing dictation. It is written with typescript and also includes typescript models.
beginVoiceRecognition
- starts recording (asks permission for mic if needed) and creates connection with asr api.
endVoiceRecognition(forceCloseWebsocket = false)
- stops recording and closes socket if forceCloseWebsocket
param is set to true
. If forceCloseWebsocket
is set to false, it will close connection on next final result.
Library also provides possibility to draw real time oscilogram that will be drawn into <canvas>
element. To be able to create this visualization, you need to add <canvas></canvas>
element to your html and pass elements ID to visualizer configuration.
Couple small examples for easier integration. Remember to replace variable placeholders with your own values.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tilde speech recognition example</title>
<!-- Include Tilde asr api client -->
<script src="https://unpkg.com/@tilde-nlp/asr-api-client@latest/index.js"></script>
</head>
<body>
<script language="javascript">
// set up config
var config = {
url: "wss://services.tilde.com/service/asr/ws/${SYSTEM_NAME}/?contentType=audio/x-raw&sampleRate=44100&channelCount=1&x-api-key=${API_KEY}",
onResult: result => { if (result.final) console.log(result) }, // partial or final result
onRecordingStartStop: isRecording => console.log(isRecording), // boolean value emitted whenever isRecording changes
onError: error => console.error(error) // error callback
}
// Create asr client
var asrClient = new window["asr-api-client"].AsrClient(config);
// Start voice recognition
asrClient.beginVoiceRecognition();
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tilde speech recognition example</title>
<!-- Include Tilde asr api client -->
<script src="https://unpkg.com/@tilde-nlp/asr-api-client@latest/index.js"></script>
</head>
<body>
<script language="javascript">
// set up config
var config = {
url: "wss://services.tilde.com/service/asr/ws/${SYSTEM_NAME}/?contentType=audio/x-raw&sampleRate=44100&channelCount=1&x-api-key=${API_KEY}",
onResult: result => { if (result.final) console.log(result) }, // partial or final result
onRecordingStartStop: (isRecording, ctx) => {
// start drawing audio oscilogram if neccesarry
if (isRecording) {
ctx.audioVisualizer?.visualizeAudio();
}
}, // boolean value emitted whenever isRecording changes
onError: error => console.error(error), // error callback
// configuration if you want to add real time oscillogram, if not, you do not have to set this value
visualizerConfig: {
// id of container where to put visualizer
visualizerId: "audio-visualizer",
// optional param - visualization color. Default value: "#811331"
strokeStyle: "#811331"
}
}
// Create asr client
var asrClient = new window["asr-api-client"].AsrClient(config);
// Start voice recognition
asrClient.beginVoiceRecognition();
</script>
</body>
<!--necessary if you need real time oscilogram-->
<canvas id="audio-visualizer"></canvas>
</html>