Recorder-preact-webpack-nd NPM

Getting started

Our Recorder component is the user interface where someone can record their answers, based on a desired and configured configuration. You, your customers and their users can create and configure an unlimited amount of audio intakes through our Editor application or directly via our API (see the docs here). In the latter case you, as the software provider, are responsible for providing the users an interface where they can configure their audio intakes.

The recorder component consists of 3 elements that define the user experience:

Introduction
Question(s)
Afterword

For each question the person can re-record their answer until they are satisfied. Once all questions are answered they will be thanked with the afterword and left with the option to download their audio answers for their own reference.

Once an audio intake is successfully configured through our Editor application and/or our API you can use the unique intakeId from the response and pass that as a property to our Recorder application. This way you have a unique configuration of a Recorder with a certain set of questions and settings.

Example

Frame

Installation

  yarn add @audio-intakes/recorder

  npm install --save @audio-intakes/recorder

<head>
  ...
  <!-- Load the Recorder library in the HTML head tag of your page -->
  <script src="//components.audiointakes.com/recorder.js"></script>
  ...
</head>

Importing

ES6:

import "@audio-intakes/recorder";

CommonJS:

require("@audio-intakes/recorder");

Versions

Latest: 0.1.1

Usage

Authorization

To be able to use the Recorder application you are required to pass on a valid JWT bearer token. This token can be fetched using your api credentials (key and secret) provided by is. The token expires after one day but if the Recorder receives an expired token it will inform you with this feedback.

Endpoint

Development:

https://partner-api-development.onrender.com/v1/auth/login

Production:

https://partner-api-production.onrender.com/v1/auth/login

Headers

Content-Type application/json

Body

{
  "apiKey": "<YOUR_API_KEY>",
  "apiSecret": "<YOUR_API_SECRET>"
}

It's recommended that you store your API Key and API Secret in safe environment. You will be sent two sets of credentials: one for development and one for production.

Return

When you pass your credentials this endpoint will return a JWT bearer token with an issued at timestamp. The token expires after one day but if the Recorder receives an expired token it will inform you with this feedback.

{
  "accessToken": "<your_access_token>"
}

Example

For the container div the minimum required width is 280px and the minimum required height 480px. The Recorder will read these dimensions and if not sufficient update the UI with this message.

NPM

import "@audio-intakes/recorder";

function Demo() {
  return (
    <div id="recorder-container" style="min-width: 280px; min-height:480px">
      <audio-intakes-player-component
        token="<your_access_token>"
        customer="<a_valid_customer_id>"
        intake="<a_valid_intake_id>"
        fullscreen=true
      />
    </div>
  );
}

render(<Demo />);

CDN

When you have added the recorder script with the cdn you can add it like this:

<body>
  <div id="recorder-container" style="min-width: 280px; min-height:480px">
    <audio-intakes-recorder-component
      token="<your_token>"
      customer="<a_valid_customer_id>"
      intake="<a_valid_intake_id>"
      fullscreen="true"
    />
  </div>
</body>

Arguments

Argument	Type	Description	Default value
token (required)	String	JWT bearer token	undefined
customer (required)	String	A valid customer id to authorize the provided intakeId	undefined
intake (required)	String	A valid intake id to fetch the right intake as configured by the user	undefined
fullscreen (optional)	Boolean	Whether the Recorder is embedded 'as part of' other content or if the Recorder is the only UI on the page	true

Available languages

Language	Locale
English	"en-gb"
Dutch	"nl"

Available themes

["light", "dark"]

Browser compatibility

IE Edge Firefox Chrome Safari Opera Safari on iOS Opera mini Android browser Opera mobile Chrome for Android Firefox for Android

Errors

API

Not found (404)

Usually returned when the API doesn’t find the requested resource using its ID reference. In the case of the Recorder component this could either mean the customerId of the intakeId.

Unauthorized (401)

Returned when either the JWT token in invalid/expired or if you are not authorized to fetch the required submission based on the provided customerId.

Internal service error (501)

Our API experiences an internal error. We will get notified when this happens and we will do everything to get us back live as soon as possible.

Properties

Invalid token

The token is not provided, not of type string, not a JWT token or, the token is expired.

Invalid customerId

The customerId is either not provided or not of type string.

Invalid intakeId

The intakeId is either not provided or not of type string.

Invalid language

The language is either not of type string or not (yet) supported by us. You can find the supported languages under the 'Available languages' section in this README.md.

Invalid theme

The theme is either not of type string or not (yet) supported by us. You can find the supported themes under the 'Available themes' section in this README.md.

Device

Insufficient size

The size of the element containing our Recorder component is not sufficient. Our Recorder component requires a minimum width of 280px and a minimum height of 480px.

Unsupported browser

The device or browser is not supported by our Recorder component. You can find the list of supported browsers under the 'Browser compatibility' section in this README.md.

Troubleshooting

If you have any trouble understanding our documentation please feel free to contact us at:

Partner support: partners@audiointakes.com

Slack channel: slack@audiointakes.com

audio intakes recruitment applying speech to text

@infinitebrahmanuniverse/nolb-reco @everything-registry/sub-chunk-2633

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago