Developer Tools / @methrax/voice-recorder / Templates & Structural Customization

Templates & Structural Customization

Use design tokens when the default structure is acceptable. For structural replacement, provide any combination of the four named templates.

Template slots

Slot	Context
`#micSelectTemplate`	`devices`, `selectedDeviceId`, `selectDevice(id)`
`#controlsTemplate`	`start`, `pause`, `resume`, `stop`, state flags, duration, peak amplitude
`#statusTemplate`	Same recording context as controls
`#playerTemplate`	`audioUrl`, `isPlaying`, `currentTimeMs`, `durationMs`, `togglePlay()`, `seek(ms)`

Custom hold control

<m-voice-recorder mode="hold">
  <ng-template #controlsTemplate let-recorder>
    <button
      type="button"
      (pointerdown)="recorder.start()"
      (pointerup)="recorder.stop()"
      (pointercancel)="recorder.stop()"
    >
      {{ recorder.isRecording ? 'Release to stop' : 'Hold to record' }}
    </button>
  </ng-template>
</m-voice-recorder>

Replace player action controls

Use the exported projection directives to provide application-specific labels or icon components. The library keeps text defaults and does not require an icon package.

<m-audio-player [src]="audioUrl">
  <ng-template mPlayIcon><span>Start</span></ng-template>
  <ng-template mPauseIcon><span>Wait</span></ng-template>
  <ng-template mDownloadIcon><span>Save file</span></ng-template>
  <ng-template mDiscardIcon><span>&times;</span></ng-template>
</m-audio-player>

Import MAudioPlayerComponent, MPlayIconDirective, MPauseIconDirective, MDownloadIconDirective, and MDiscardIconDirective into the consumer standalone component.

Use the audio player independently

<m-voice-recorder
  [showReplayPlayer]="false"
  (audioRecorded)="setPlayerSource($event)"
/>
@if (audioUrl) {
<m-audio-player
  [src]="audioUrl"
  fileName="answer"
  (clear)="clearPlayerSource()"
/>
}

Revoke application-created Blob URLs after discard or component destruction.