const params = {
language: 'kor', // Required. You can choose 'eng' for English or 'kor' for Korean
accessToken: '$YOUR_ACCESS_TOKEN', // Required. You should get access token from your sever
finalOnly: false, // Optional(Default: false) If this is 'true', you will get only final results.
ws: false, // Optional(Default: false) We are using WebSocket Secure (wss). If this is true, we will use 'ws' instead of 'wss'
debug: true // Optional(Default: false) If this is 'true', you will get all logs from Zeroth.
}
⚠️ important
you have to replace $YOUR_ACCESS_TOKEN with access_token what you got from here
const params = {
language: 'kor', // Required. You can choose 'eng' for English or 'kor' for Korean
appId: '$YOUR_APP_ID', // Required. You can get your appId with create new application in zeroth-console
appSecret: '$YOUR_APP_SECRET', // Required. You can get your appSecret with create new application in zeroth-console
finalOnly: false, // Optional(Default: false) If this is 'true', you will get only final results.
ws: false, // Optional(Default: false) We are using WebSocket Secure (wss). If this is true, we will use 'ws' instead of 'wss'
debug: true // Optional(Default: false) If this is 'true', you will get all logs from Zeroth.
}
⚠️ important
you have to replace$YOUR_APP_ID and$YOUR_APP_SECRETwith yours from Zeroth Console. You will have to create new application.
In this case, zeroth-js will issue accessToken based on your appId, appSecret
Difference between with server, without server
Only difference is using accessToken or using appId and appSecret in parameter.
⚠️ important
you have to replace$YOUR_APP_ID and$YOUR_APP_SECRETwith yours from Zeroth Console. You will have to create new application.
In this tutorial, We will using Using without Server way for convenience.
If you are using Using with Server way, please replace appId , appSecret parameters with accessToken parameter.
const zeroth = new ZerothMic(params);
That's it! Create an app.js file to start recording.
Now, you are ready to use Zeroth with the microphone in your browser. To start recording, just call the start() function.
These are Zeroth's event callbacks:
onconnect
Upon successful connection to Zeroth
Add "start audio recording" or "prepare to send audio file" logic in here.
ondata
Upon getting a result from Zeroth
You can get the full JSON result and add logic related to the result here.
ondisconnect
Upon disconnecting from Zeroth.
Add "stop recording" logic in here.
onerror
When you couldn't connected with Zeroth, or there's some error between Zeroth.
Add error handling here.
Now, let's add logic. First, get elements from our html.
const start = document.querySelector('.start'); // Start button
const stop = document.querySelector('.stop'); // Stop button
const transcript = document.querySelector('.transcript'); // Where transcribed text will be shown.
const json = document.querySelector('.json'); // Where full JSON result will be shown.
stop.disabled = true; // Stop button is initally disabled.
Create an onSuccess function to add event callbacks to Zeroth. We will use the onSuccess function when start() 's getUserMedia() is successful.
const onSuccess = () => {
zeroth.onconnect = () => {
stop.disabled = false; // Turn on stop button
};
zeroth.ondata = data => {
transcript.textContent = data.transcript; // Add only transcribed text to `transcript` element
json.textContent = JSON.stringify(data); // Add full JSON result to `json` element
};
zeroth.ondisconnect = () => {
start.disabled = false; // Turn on Start button
zeroth.stop(); // Stop recording
};
zeroth.onerror = error => {
transcript.textContent = 'zeroth error: ' + error; // Add error message to `transcript` element
zeroth.stop(); // Stop recording
};
};
Then, add onclickevent to call start() and stop()
start.onclick = () => {
zeroth.start() // When `Start` button is clicked, try to start recording.
.then(() => {
console.log('Successfully initialized recording');
onSuccess()
// What to do after recording is initialized
})
.catch(() => {
console.log('Your browser doesn\'t support recording');
// What to do if recording fails to initialize
});
};
stop.onclick = () => {
zeroth.stop(); // When `Stop` button clicked, stop recording.
};
};
Full Code example
That's it! You have now successfully made a speech-to-text web application.