asr-api-client library
Library is created for implementing dictation. It is written with typescript and also includes typescript models.
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>