Utilização

Play a track and record a voice note

Este tipo é usado por 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>
  );
}

Declaração do tipo

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

Membros 14

NomeTipoObrigatórioDescrição
idsó de leituranumberSim—
playingsó de leituraSignal<boolean>Sim—
loadedsó de leituraReadonlySignal<boolean>SimThe source is open and its duration known, or known to be unknown (a live stream).
bufferingsó de leituraReadonlySignal<boolean>SimWaiting for data: playing resumes on its own once enough has arrived.
volumesó de leituraSignal<number>Sim0 to 1.
ratesó de leituraSignal<number>Sim0.5 to 2.
loopsó de leituraSignal<boolean>Sim—
timesó de leituraMotion<number>SimSeconds from the start.
durationsó de leituraMotion<number>SimSeconds; 0 until loaded, and for a live stream.
errorsó de leituraReadonlySignal<string>SimWhy the source failed to load or play.
play() => Promise<void>Sim—
pause() => Promise<void>Sim—
seek(seconds: number) => Promise<void>Sim—
watch(event: "ended", listener: () => void) => EventSubscriptionSimCalls listener each time playback reaches the end; a looping player each time round.
play — assinaturas de método

Assinaturas

ts
(): Promise<void>

Parâmetros

Sem parâmetros.

Devolve

Promise<void>

pause — assinaturas de método

Assinaturas

ts
(): Promise<void>

Parâmetros

Sem parâmetros.

Devolve

Promise<void>

seek — assinaturas de método

Assinaturas

ts
(seconds: number): Promise<void>

Parâmetros

NomeTipoObrigatórioDescrição
secondsnumberSim—

Devolve

Promise<void>

watch — assinaturas de método

Assinaturas

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

Parâmetros

NomeTipoObrigatórioDescrição
event"ended"Sim—
listener() => voidSim—

Devolve

EventSubscription

Gerado a partir das declarações TypeScript públicas: assinaturas, props e predefinições vêm da fonte verificada, as descrições da sua JSDoc. Nenhuma predefinição é inventada.