Recording Session

The <fortyfour-recording-session> element manages the recording lifecycle. It handles microphone access, audio capture, upload, and server-side processing. You never see it on the page, but it coordinates everything that happens when a user records audio.

Basic usage

Give it an api-host and session-id. The session ID comes from the Create Session API endpoint.

HTML

<fortyfour-recording-session
  id="session"
  api-host="api.44.audio"
  session-id="YOUR_SESSION_ID"
></fortyfour-recording-session>

Then use JavaScript to control the recording.

JavaScript

const session = document.getElementById("session");

// Start recording
await session.start();

// Stop recording
await session.stop();

Attributes

Attribute	Type	Default	Description
`api-host`	string	`api.44.audio`	API host for uploading recordings
`session-id`	string	required	Session ID from the Create Session API

Properties

These are read-only JavaScript properties on the element.

Property	Type	Description
`state`	string	Current state (see state table below)
`duration`	number	Current recording duration in milliseconds

States

The recording session moves through these states.

State	Description
`idle`	Initial state, ready to record
`requesting`	Requesting microphone access from the browser
`recording`	Actively recording audio
`stopping`	Stopping the recording and preparing upload
`uploading`	Uploading the audio file to the server
`processing`	Server is processing the recording
`complete`	Recording is fully processed and ready
`error`	Something went wrong

Methods

JavaScript

const session = document.getElementById("session");

await session.start(); // Request mic access and start recording
await session.stop();  // Stop recording and begin upload
session.reset();       // Reset to idle state for a new recording

Method	Description
`start()`	Request microphone access and begin recording
`stop()`	Stop recording and begin upload/processing
`reset()`	Reset the session to idle for another recording

Events

All events bubble up through the DOM.

JavaScript

const session = document.getElementById("session");

session.addEventListener("recording", () => {
  console.log("Recording started");
});

session.addEventListener("complete", (e) => {
  console.log("Recording ID:", e.detail.recordingId);
});

Event	Detail	Description
`requesting`	none	Requesting microphone access
`recording`	none	Recording started
`stopping`	none	Recording is being stopped
`uploading`	none	Upload started
`processing`	none	Server processing started
`complete`	`{ recordingId }`	Recording ready with ID
`error`	`{ message }`	An error occurred
`timeupdate`	`{ duration }`	Recording duration updated

Full example

Here is a complete recording flow that creates a session, records audio, and shows the result.

HTML

<fortyfour-recording-session
  id="session"
  api-host="api.44.audio"
  session-id="YOUR_SESSION_ID"
></fortyfour-recording-session>

<button id="start-btn">Start Recording</button>
<button id="stop-btn" disabled>Stop Recording</button>
<p id="status">Ready</p>

<script>
const session = document.getElementById("session");
const startBtn = document.getElementById("start-btn");
const stopBtn = document.getElementById("stop-btn");
const status = document.getElementById("status");

startBtn.addEventListener("click", async () => {
  await session.start();
  startBtn.disabled = true;
  stopBtn.disabled = false;
});

stopBtn.addEventListener("click", async () => {
  await session.stop();
  stopBtn.disabled = true;
});

session.addEventListener("recording", () => {
  status.textContent = "Recording...";
});

session.addEventListener("uploading", () => {
  status.textContent = "Uploading...";
});

session.addEventListener("processing", () => {
  status.textContent = "Processing...";
});

session.addEventListener("complete", (e) => {
  status.textContent = "Done! ID: " + e.detail.recordingId;
  startBtn.disabled = false;
  session.reset();
});

session.addEventListener("error", (e) => {
  status.textContent = "Error: " + e.detail.message;
  startBtn.disabled = false;
  stopBtn.disabled = true;
  session.reset();
});
</script>