# Quickstart - Web ## Zeroth ready in 5 mins First, create file name `Index.html` {% code title="index.html" %} ```markup

Zeroth Demo

Record

Response

transcript only -

complete json -

``` {% endcode %} * 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](https://raw.githubusercontent.com/goodatlas/zeroth-js/master/dist/zeroth.min.js) * 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 {% content-ref url="../library/use-zeroth-on-browsers" %} [use-zeroth-on-browsers](https://zeroth.gitbook.io/doc/library/use-zeroth-on-browsers) {% endcontent-ref %} {% code title="app.js" %} ```javascript 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 }; ``` {% endcode %} {% hint style="info" %} **⚠️ important**\ you have to replace`$YOUR_APP_ID` and`$YOUR_APP_SECRET`with yours from Zeroth Console ( [https://zeroth-console.goodatlas.com](https://zeroth-console.goodatlas.com/)). You will have to create new application. {% endhint %} {% hint style="warning" %} There's two way to use `zeroth-js` \ and this is [Using without Server](https://zeroth.gitbook.io/doc/library/use-zeroth-on-browsers#using-without-server-less-secure-but-simple-way)(Less secure but simple) way.\ If you are using with Server, Please check [**Using with Server**](https://zeroth.gitbook.io/doc/library/use-zeroth-on-browsers#using-with-server-secure-way-recommended)**(**Secure way, Recommended) way. {% endhint %} open `index.html` and you can start using Zeroth.