Quickstart - Web

This tutorial only contains a quick way to start using Zeroth on browser

Zeroth ready in 5 mins

First, create file name Index.html

index.html

<!DOCTYPE html>
<html>
<body>
  <div>
    <h2>Zeroth Demo</h2>
    <h3>Record</h3>
    <p>
      <button class='start'>start</button>
      <button class='stop'>stop</button>

    </p>
    <h3>Response</h3>
    <p>
      <span><b>transcript only - </b></span>
      <span class='transcript'></span>
    </p>
    <p>
      <span><b>complete json - </b></span>
      <span class='json'></span>
    </p>
  </div>

  <script src='zeroth.min.js'></script><!-- Importing zeroth.min.js -->
  <script src='app.js'></script>
</body>
</html>

Line 8: It is a button to start recording
```
<button class='start'>start</button>
```
Line 9: It is a button to stop recording
```
 <button class='stop'>stop</button>
```
Line 14: It is an area for result of transcription. result will be shown in it.
```
      <span class='transcript'></span>
```
Line 22: It imports zeroth library. you can download zeroth.min.js from here
Line 23: zeroth library will be initialized here.
```
<script src='app.js'></script>
```

create app.js file to initialize zeroth as below. Detail explanation can be found in Javascript Library Page

app.js

const start = document.querySelector('.start');
const stop = document.querySelector('.stop');
const transcript = document.querySelector('.transcript');
const json = document.querySelector('.json');
stop.disabled = true;

const params = {
    language: 'kor',
    appId: '$YOUR_APP_ID',
    appSecret: '$YOUR_APP_SECRET',
    finalOnly: false,
    ws: false,
    debug: true
}

const zeroth = new ZerothMic(params);
    
const onError = err => {
  transcript.textContent = 'getUserMedia error: ' + err;
};

const onSuccess = () => {
  zeroth.onconnect = () => {
    start.disabled = true;
    stop.disabled = false;
  };

  zeroth.ondata = data => {
    transcript.textContent = data.transcript;
    json.textContent = JSON.stringify(data);
  };

  zeroth.ondisconnect = () => {
    start.disabled = false;
    stop.disabled = true;
  };

  zeroth.onerror = error => {
    transcript.textContent = 'zeroth error: ' + error; 
    zeroth.stop(); 
  };
};

start.onclick = () => {
  zeroth.start()
    .then(onSuccess)
    .catch(onError);  
  start.disabled = true; // Disable start button
};

stop.onclick = () => {
  zeroth.stop();
  stop.disabled = true;  // Disable Stop button
};

⚠️ important you have to replace$YOUR_APP_ID and$YOUR_APP_SECRETwith yours from Zeroth Console ( https://zeroth-console.goodatlas.com). You will have to create new application.

There's two way to use zeroth-js and this is Using without Server(Less secure but simple) way. If you are using with Server, Please check Using with Server(Secure way, Recommended) way.

open index.html and you can start using Zeroth.

PreviousWhat is Zeroth?NextAuthentication

Last updated 6 years ago

Zeroth ready in 5 mins

First, create file name Index.html

index.html

<!DOCTYPE html>
<html>
<body>
  <div>
    <h2>Zeroth Demo</h2>
    <h3>Record</h3>
    <p>
      <button class='start'>start</button>
      <button class='stop'>stop</button>

    </p>
    <h3>Response</h3>
    <p>
      <span><b>transcript only - </b></span>
      <span class='transcript'></span>
    </p>
    <p>
      <span><b>complete json - </b></span>
      <span class='json'></span>
    </p>
  </div>

  <script src='zeroth.min.js'></script><!-- Importing zeroth.min.js -->
  <script src='app.js'></script>
</body>
</html>

Line 8: It is a button to start recording

<button class='start'>start</button>

Line 9: It is a button to stop recording

 <button class='stop'>stop</button>

Line 14: It is an area for result of transcription. result will be shown in it.

      <span class='transcript'></span>

Line 22: It imports zeroth library. you can download zeroth.min.js from here

Line 23: zeroth library will be initialized here.

<script src='app.js'></script>

create app.js file to initialize zeroth as below. Detail explanation can be found in Javascript Library Page

JavaScript Library

app.js

const start = document.querySelector('.start');
const stop = document.querySelector('.stop');
const transcript = document.querySelector('.transcript');
const json = document.querySelector('.json');
stop.disabled = true;

const params = {
    language: 'kor',
    appId: '$YOUR_APP_ID',
    appSecret: '$YOUR_APP_SECRET',
    finalOnly: false,
    ws: false,
    debug: true
}

const zeroth = new ZerothMic(params);
    
const onError = err => {
  transcript.textContent = 'getUserMedia error: ' + err;
};

const onSuccess = () => {
  zeroth.onconnect = () => {
    start.disabled = true;
    stop.disabled = false;
  };

  zeroth.ondata = data => {
    transcript.textContent = data.transcript;
    json.textContent = JSON.stringify(data);
  };

  zeroth.ondisconnect = () => {
    start.disabled = false;
    stop.disabled = true;
  };

  zeroth.onerror = error => {
    transcript.textContent = 'zeroth error: ' + error; 
    zeroth.stop(); 
  };
};

start.onclick = () => {
  zeroth.start()
    .then(onSuccess)
    .catch(onError);  
  start.disabled = true; // Disable start button
};

stop.onclick = () => {
  zeroth.stop();
  stop.disabled = true;  // Disable Stop button
};

⚠️ important you have to replace$YOUR_APP_ID and$YOUR_APP_SECRETwith yours from Zeroth Console ( https://zeroth-console.goodatlas.com). You will have to create new application.

There's two way to use zeroth-js and this is Using without Server(Less secure but simple) way. If you are using with Server, Please check Using with Server(Secure way, Recommended) way.

open index.html and you can start using Zeroth.