Using this method, you can use zeroth-js as follows:
ES5 - UMD Build
var ZerothMic = Zeroth.ZerothMic
Get Access Token
Using with Server (Secure way, Recommended)
You should add one API endpoint in your server to get accessToken.
Please check this page.
For example, If you are using node.js, express and axios , Your code will look like below.
const express = require('express');
const axios = require('axios');
const app = express();
app.get('/get-token', function (req, res) {
const url = 'https://zeroth.goodatlas.com:2053/token';
const opt = {
headers: {
Authorization : `$YOUR_APP_ID:$YOUR_APP_SECRET`
}
};
axios.get(url, opt)
.then(({ data }) => res.send(data['access_token'])) // This will return accessToken to Client
// Your error handler here
})
Using without Server (Less secure but simple way)
Parameters
Using with Server
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.
}
Using without Server
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.
}
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.
Initialize Zeroth
Create an app.js file, and import zeroth-js into your directory.
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.
