AudioPlayer — Kuito Dokumentation

Verwendung

Play a track and record a voice note

Dieser Typ wird verwendet von 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>
  );
}

Typdeklaration

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;
};

Mitglieder 14

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

play — Methodensignaturen

Signaturen

(): Promise<void>

Parameter

Keine Parameter.

Rückgabe

Promise<void>

pause — Methodensignaturen

Signaturen

(): Promise<void>

Parameter

Keine Parameter.

Rückgabe

Promise<void>

seek — Methodensignaturen

Signaturen

(seconds: number): Promise<void>

Parameter

Name	Typ	Erforderlich	Beschreibung
`seconds`	`number`	Ja	—

Rückgabe

Promise<void>

watch — Methodensignaturen

Signaturen

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

Parameter

Name	Typ	Erforderlich	Beschreibung
`event`	`"ended"`	Ja	—
`listener`	`() => void`	Ja	—

Rückgabe

EventSubscription

Generiert aus den öffentlichen TypeScript-Deklarationen: Signaturen, Props und Standardwerte stammen aus der geprüften Quelle, Beschreibungen aus deren JSDoc. Kein Standardwert ist erfunden.