Overview

This package extracts the full Canary Speech voice survey flow — API integration, audio recording, waveform visualization, timer, score display — into a single reusable custom element.

What the component does:

1. Fetches the survey definition from the Canary API using the provided credentials
2. Renders the survey prompt card (text, images, sequenced prompts)
3. Captures microphone audio via MediaRecorder, with a live waveform and progress ring
4. Converts recorded audio to 16 kHz 16-bit mono WAV and uploads it directly to Canary
5. Polls for scores and renders the visualization (score ranges, bell curves, rich text) when show-results is enabled

Installation

npm install cs-voice-survey-component

Or via CDN (no build step required):

<!-- IIFE bundle — self-registers <cs-voice-survey> globally -->
<script src="https://cdn.dev.canaryspeech.com/v/latest/voice-survey.min.js"></script>

Quick Start

ESM (bundler / Vite / Webpack)

import "cs-voice-survey-component";

<cs-voice-survey
  base-url="https://rest.eus.canaryspeech.com"
  access-token="eyJ..."
  project-code="WELL3"
  subject-name="john.doe"
  lang="en"
  show-results="true"
></cs-voice-survey>

The component self-registers the <cs-voice-survey> custom element on import. No further setup is needed.

Survey Flow

idle → loading → ready → recording → stopped → uploading → scoring → completed

Timer modes (from survey definition timerMode field):

Localization

Pass lang="en" or lang="es" to switch the UI language. The component ships English and Spanish translations for all UI strings.

Browser Support