audio.AudioPlayer — Kuito Documentation

Usage

Play a track and record a voice note

This type is used by audio.player

tsx

import { Box, Button, VStack, Text, audio, onMount } from 'kuito';

function Track() {
  // The component owns it: made when it mounts, released when it unmounts.
  const song = audio.player('https://example.com/song.mp3', { loop: true });
  const { time, duration } = song;

  return (
    <VStack>
      {/* A 280-point bar that fills from the left, moved on the UI thread. */}
      <Box width={280} height={4} overflow="hidden">
        <Box
          width={280}
          height={4}
          backgroundColor="#e50914"
          translateX={duration.value > 0 ? (time.value / duration.value - 1) * 280 : -280}
        />
      </Box>
      <Button onPress={() => (song.playing.value = !song.playing.value)}>
        {song.playing.value ? 'Pause' : 'Play'}
      </Button>
      <Button onPress={() => void song.seek(time.value + 30)}>Skip</Button>
    </VStack>
  );
}

function Memo() {
  const recorder = audio.recorder({ quality: 'medium', metering: true });

  onMount(() => void audio.configure({ allowsRecording: true }));

  return (
    <VStack>
      <Box height={8} backgroundColor="#e5484d" opacity={1 + recorder.level.value / 60} />
      <Button onPress={() => void recorder.start()}>Record</Button>
      <Button onPress={async () => console.log((await recorder.stop()).uri)}>Stop</Button>
    </VStack>
  );
}

Type declaration

export type AudioPlayer = {
  readonly id: number;
  readonly playing: Signal<boolean>;
  /** The source is open and its duration known, or known to be unknown (a live stream). */
  readonly loaded: ReadonlySignal<boolean>;
  /** Waiting for data: playing resumes on its own once enough has arrived. */
  readonly buffering: ReadonlySignal<boolean>;
  /** 0 to 1. */
  readonly volume: Signal<number>;
  /** 0.5 to 2. */
  readonly rate: Signal<number>;
  readonly loop: Signal<boolean>;
  /** Seconds from the start. */
  readonly time: Motion<number>;
  /** Seconds; 0 until loaded, and for a live stream. */
  readonly duration: Motion<number>;
  /** Why the source failed to load or play. */
  readonly error: ReadonlySignal<string | null>;
  play(): Promise<void>;
  pause(): Promise<void>;
  seek(seconds: number): Promise<void>;
  /** Calls `listener` each time playback reaches the end; a looping player each time round. */
  watch(event: 'ended', listener: () => void): EventSubscription;
};

Members 14

Name	Type	Required	Description
`id`readonly	`number`	Yes	—
`playing`readonly	`Signal<boolean>`	Yes	—
`loaded`readonly	`ReadonlySignal<boolean>`	Yes	The source is open and its duration known, or known to be unknown (a live stream).
`buffering`readonly	`ReadonlySignal<boolean>`	Yes	Waiting for data: playing resumes on its own once enough has arrived.
`volume`readonly	`Signal<number>`	Yes	0 to 1.
`rate`readonly	`Signal<number>`	Yes	0.5 to 2.
`loop`readonly	`Signal<boolean>`	Yes	—
`time`readonly	`Motion<number>`	Yes	Seconds from the start.
`duration`readonly	`Motion<number>`	Yes	Seconds; 0 until loaded, and for a live stream.
`error`readonly	`ReadonlySignal<string>`	Yes	Why the source failed to load or play.
`play`	`() => Promise<void>`	Yes	—
`pause`	`() => Promise<void>`	Yes	—
`seek`	`(seconds: number) => Promise<void>`	Yes	—
`watch`	`(event: "ended", listener: () => void) => EventSubscription`	Yes	Calls `listener` each time playback reaches the end; a looping player each time round.

play — method signatures

Signatures

(): Promise<void>

Parameters

No parameters.

Returns

Promise<void>

pause — method signatures

Signatures

(): Promise<void>

Parameters

No parameters.

Returns

Promise<void>

seek — method signatures

Signatures

(seconds: number): Promise<void>

Parameters

Name	Type	Required	Description
`seconds`	`number`	Yes	—

Returns

Promise<void>

watch — method signatures

Signatures

(event: "ended", listener: () => void): EventSubscription

Parameters

Name	Type	Required	Description
`event`	`"ended"`	Yes	—
`listener`	`() => void`	Yes	—

Returns

EventSubscription

Generated from the public TypeScript declarations: signatures, props and defaults come from the checked source, descriptions from its JSDoc. No defaults are invented.