AudioPlayer — Kuito Documentação

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

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

Nome	Tipo	Obrigatório	Descrição
`id`só de leitura	`number`	Sim	—
`playing`só de leitura	`Signal<boolean>`	Sim	—
`loaded`só de leitura	`ReadonlySignal<boolean>`	Sim	The source is open and its duration known, or known to be unknown (a live stream).
`buffering`só de leitura	`ReadonlySignal<boolean>`	Sim	Waiting for data: playing resumes on its own once enough has arrived.
`volume`só de leitura	`Signal<number>`	Sim	0 to 1.
`rate`só de leitura	`Signal<number>`	Sim	0.5 to 2.
`loop`só de leitura	`Signal<boolean>`	Sim	—
`time`só de leitura	`Motion<number>`	Sim	Seconds from the start.
`duration`só de leitura	`Motion<number>`	Sim	Seconds; 0 until loaded, and for a live stream.
`error`só de leitura	`ReadonlySignal<string>`	Sim	Why 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) => EventSubscription`	Sim	Calls `listener` each time playback reaches the end; a looping player each time round.

play — assinaturas de método

Assinaturas

(): Promise<void>

Parâmetros

Sem parâmetros.

Devolve

Promise<void>

pause — assinaturas de método

Assinaturas

(): Promise<void>

Parâmetros

Sem parâmetros.

Devolve

Promise<void>

seek — assinaturas de método

Assinaturas

(seconds: number): Promise<void>

Parâmetros

Nome	Tipo	Obrigatório	Descrição
`seconds`	`number`	Sim	—

Devolve

Promise<void>

watch — assinaturas de método

Assinaturas

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

Parâmetros

Nome	Tipo	Obrigatório	Descrição
`event`	`"ended"`	Sim	—
`listener`	`() => void`	Sim	—

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.