asr-api-client library
Library is created for implementing dictation. It is written with typescript and also includes typescript models.
Core methods of asrClient
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.
Real time oscilogram
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.
Examples
Couple small examples for easier integration. Remember to replace variable placeholders with your own values.
Plain js without any visualization
<!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>
<script src="https://cdn.webrtc-experiment.com/MediaStreamRecorder.js"> </script>
<script src="https://unpkg.com/@tilde-nlp/asr-api-client@latest/index.js"></script>
</head>
<body>
<script language="javascript">
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) },
onRecordingStartStop: isRecording => console.log(isRecording),
onError: error => console.error(error)
}
var asrClient = new window["asr-api-client"].AsrClient(config);
asrClient.beginVoiceRecognition();
</script>
</body>
</html>
Plain js with audio visualization
<!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>
<script src="https://cdn.webrtc-experiment.com/MediaStreamRecorder.js"> </script>
<script src="https://unpkg.com/@tilde-nlp/asr-api-client@latest/index.js"></script>
</head>
<body>
<script language="javascript">
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) },
onRecordingStartStop: (isRecording, ctx) => {
if (isRecording) {
ctx.audioVisualizer?.visualizeAudio();
}
},
onError: error => console.error(error),
visualizerConfig: {
visualizerId: "audio-visualizer",
strokeStyle: "#811331"
}
}
var asrClient = new window["asr-api-client"].AsrClient(config);
asrClient.beginVoiceRecognition();
</script>
</body>
<canvas id="audio-visualizer"></canvas>
</html>