AudioPlayer — Kuito Documentation

Utilisation

Play a track and record a voice note

Ce type est utilisé par 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>
  );
}

Déclaration du type

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

Membres 14

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

play — signatures de méthode

Signatures

(): Promise<void>

Paramètres

Aucun paramètre.

Retourne

Promise<void>

pause — signatures de méthode

Signatures

(): Promise<void>

Paramètres

Aucun paramètre.

Retourne

Promise<void>

seek — signatures de méthode

Signatures

(seconds: number): Promise<void>

Paramètres

Nom	Type	Requis	Description
`seconds`	`number`	Oui	—

Retourne

Promise<void>

watch — signatures de méthode

Signatures

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

Paramètres

Nom	Type	Requis	Description
`event`	`"ended"`	Oui	—
`listener`	`() => void`	Oui	—

Retourne

EventSubscription

Généré depuis les déclarations TypeScript publiques : signatures, props et valeurs par défaut viennent de la source vérifiée, les descriptions de sa JSDoc. Aucune valeur par défaut n'est inventée.