Constructor
new SpeakersPanel(workspace, callbacks)
Parameters:
| Name | Type | Description | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
workspace | object | the Workspace controller instance | |||||||||
callbacks | object | callback functions for speaker interactionsProperties
|
Classes
Methods
addSpeaker(speakerIdopt)
Adds a new speaker with an auto-generated unique id (SPEAKER_N where N avoids collisions). Immediately focuses the new name span so the user can type a custom name right away.
Parameters:
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
speakerId | string | | <optional> | null | explicit id to assign; auto-generated if null |
buildSpeakerRow(speaker)
Builds a table row for a speaker and appends it to the speakers table body.
Parameters:
| Name | Type | Description |
|---|---|---|
speaker | object | speaker object with id, name, hue, and sample |
buildSpeakerSampleCell(speaker) → {HTMLTableCellElement}
Builds the sample cell for a speaker row. If a sample exists it shows the waveform with play/remove controls; otherwise it shows upload/record/segment buttons.
Parameters:
| Name | Type | Description |
|---|---|---|
speaker | object | the speaker object to build the cell for |
Returns:
- Type:
- HTMLTableCellElement
clearSpeakersPanel()
Clears the panel by re-rendering with no active project.
closeHuePicker()
Closes and removes the active hue picker if one is open.
(async) decodeSampleBuffer(arrayBuffer) → {Promise.<{audioBuffer: AudioBuffer, peaks: Array.<number>}>}
Decodes an audio ArrayBuffer and extracts 120 peak bars for the mini waveform visualization.
Parameters:
| Name | Type | Description |
|---|---|---|
arrayBuffer | ArrayBuffer | raw audio data to decode |
Returns:
- Type:
- Promise.<{audioBuffer: AudioBuffer, peaks: Array.<number>}>
deleteSpeaker(id)
Deletes a speaker. If any transcript segments are assigned to this speaker, shows a reassignment modal prompting the user to pick another speaker before deletion. If no segments are affected, shows a simpler confirmation modal. Prevents deletion when only one speaker exists.
Parameters:
| Name | Type | Description |
|---|---|---|
id | string | speaker id to remove |
drawSampleWaveform(canvas, peaks, progressopt, coloropt)
Renders waveform peak bars into a canvas element. Bars to the left of `progress` are drawn at full opacity (played), bars to the right at reduced opacity (unplayed).
Parameters:
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
canvas | HTMLCanvasElement | target canvas element to draw into | ||
peaks | Array.<number> | array of 0..1 amplitude values | ||
progress | number | <optional> | 0 | playback fraction 0..1 |
color | string | <optional> | '#47c8ff' | hex color for the bars |
loadFromProject(project)
Loads speaker data from the given project and renders the panel.
Parameters:
| Name | Type | Description |
|---|---|---|
project | Project | the project to load speaker data from |
makeSpeakerEditable(spanEl, speaker)
Replaces a speaker name span with a text input for inline editing. Commits on Enter or blur; cancels (restores span) on Escape.
Parameters:
| Name | Type | Description |
|---|---|---|
spanEl | HTMLElement | the .speaker-name span to replace |
speaker | object | the speaker object being renamed |
makeSpeakerNameSpan(speaker) → {HTMLElement}
Creates a styled, clickable speaker name span. Clicking it enters inline edit mode; hovering it highlights that speaker's regions on the waveform.
Parameters:
| Name | Type | Description |
|---|---|---|
speaker | object | | the speaker object, or a speaker id string to look up |
Returns:
- Type:
- HTMLElement
openHuePicker(speaker, swatchEl)
Opens a hue picker popover anchored below `swatchEl`.
Parameters:
| Name | Type | Description |
|---|---|---|
speaker | object | the speaker object whose hue should be changed |
swatchEl | HTMLElement | the color swatch that was clicked |
openSampleUpload(id)
Opens a hidden file input dialog for uploading a voice sample. On selection, decodes the audio and stores it via setSpeakerSample.
Parameters:
| Name | Type | Description |
|---|---|---|
id | string | speaker id |
openSegPicker(speaker)
Opens the segment picker modal, showing all transcript segments. Clicking a row slices that segment's audio as the speaker's voice sample. If the selected segment belongs to a different speaker, a confirmation dialog is shown first.
Parameters:
| Name | Type | Description |
|---|---|---|
speaker | object | the speaker object for whom the sample will be set |
playSampleAudio(speaker, playBtn, canvas, peaks, progressLine)
Plays a speaker voice sample using the Web Audio API and animates a progress line over the mini waveform. Clicking the play button a second time stops playback early.
Parameters:
| Name | Type | Description |
|---|---|---|
speaker | object | the speaker object whose sample will be played |
playBtn | HTMLButtonElement | the play/stop button element |
canvas | HTMLCanvasElement | waveform canvas to animate during playback |
peaks | Array.<number> | 120-bar peak array for waveform display |
progressLine | HTMLElement | thin overlay element showing play position |
removeSpeakerSample(id)
Removes a speaker's voice sample and revokes its blob URL.
Parameters:
| Name | Type | Description |
|---|---|---|
id | string | speaker id |
renameSpeaker(speaker, newName)
Renames a speaker: updates liveNameMap, marks the transcript dirty, and live-patches all in-DOM speaker name spans so the page doesn't need a full re-render.
Parameters:
| Name | Type | Description |
|---|---|---|
speaker | object | the speaker object to rename |
newName | string | desired display name; reset to id if blank |
renderSpeakersPanel()
Re-renders the speakers table from the active project's speaker data.
setSpeakerSample(id, audioBuffer, blobUrl, peaks)
Stores a decoded speaker sample in state. Revokes any previously stored blob URL to avoid memory leaks, then re-renders the speakers panel.
Parameters:
| Name | Type | Description |
|---|---|---|
id | string | speaker id |
audioBuffer | AudioBuffer | the decoded audio buffer |
blobUrl | string | | blob URL for re-upload to server, or null if not needed |
peaks | Array.<number> | 120-bar peak array for waveform display |
(async) sliceSegmentAsSample(id, seg)
Extracts the audio for a single transcript segment from the main track and stores it as a speaker voice sample. Uses the full decoded audio buffer to avoid re-fetching; slices by sample index rather than time. Only channel 0 is used (mono sample).
Parameters:
| Name | Type | Description |
|---|---|---|
id | string | speaker id |
seg | Object | segment with start/end in seconds |
speakerDisplayName(id) → {string}
Returns the user-facing display name for a speaker, falling back to the raw CSV id if no rename has been applied.
Parameters:
| Name | Type | Description |
|---|---|---|
id | string | speaker id to look up |
Returns:
- Type:
- string
startRecording(id, btn)
Starts microphone recording for a speaker voice sample (or stops if already recording). Auto-stops after 20 seconds. On stop, encodes to a Blob and stores via setSpeakerSample.
Parameters:
| Name | Type | Description |
|---|---|---|
id | string | speaker id |
btn | HTMLButtonElement | the ⏺ Rec button; its text is toggled |