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 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
};

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

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 ( ). You will have to create new application.

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

open index.html and you can start using Zeroth.