Paquete de uso de sonido: efectos de sonido en aplicaciones de reacción

• En los primeros días de la web, algunas páginas reproducían música MIDI de fondo.
• Los estafadores emergentes usan sonidos para lograr sus malos objetivos. Ellos, con la ayuda de los sonidos, buscan atraer la atención de los usuarios y hacer que el fraude sea más creíble.
• El sonido está presente en los videos de inicio automático (bueno, esto es absolutamente una pesadilla).

Visión general

import useSound from 'use-sound';
import boopSfx from '../../sounds/boop.mp3';
const BoopButton = () => {
  const [play] = useSound(boopSfx);
  return <button onClick={play}>Boop!</button>;
};

• Parar prematuramente la reproducción, así como pausar y reanudar la reproducción.
• Descargar algo así como una "hoja de sprites" de sonido y dividirlo en sonidos separados.
• Configuración de la velocidad de reproducción con la capacidad de acelerar y ralentizar la reproducción de sonidos.
• Muchos oyentes de eventos.
• Muchas funciones avanzadas disponibles gracias a Howler.

Conceptos básicos de uso de sonido

▍Instalación

#  yarn
yarn add use-sound
#  NPM
npm install use-sound

▍ Importar

import useSound from 'use-sound';

import boopSfx from '../../sounds/boop.mp3';

Busca y prepara sonidos

▍Preparación de sonidos

• Los sonidos, como las cadenas, se pueden enmarcar mediante un espacio vacío. Los fragmentos de silencio generalmente se cortan, como resultado, el efecto de sonido correspondiente se reproduce inmediatamente después de la ocurrencia del evento sonoro.
• Al preparar sonidos, es posible que deba ajustar su volumen, de modo que todos los sonidos utilizados en un proyecto tengan el mismo volumen.
• Freesound.org tiene sonidos almacenados en varios formatos de audio. Es muy posible que necesite convertir los sonidos que le gustan a MP3.

Sonido y disponibilidad

Recetas

▍ Casilla de verificación

function Demo() {
  const [isChecked, setIsChecked] = React.useState(
    false
  );

  const [playActive] = useSound(
    '/sounds/pop-down.mp3',
    { volume: 0.25 }
  );
  const [playOn] = useSound(
    '/sounds/pop-up-on.mp3',
    { volume: 0.25 }
  );
  const [playOff] = useSound(
    '/sounds/pop-up-off.mp3',
    { volume: 0.25 }
  );

  return (
    <Checkbox
      name="demo-checkbox"
      checked={isChecked}
      size={24}
      label="I agree to self-isolate"
      onChange={() => setIsChecked(!isChecked)}
      onMouseDown={playActive}
      onMouseUp={() => {
        isChecked ? playOff() : playOn();
      }}
    />
  );
}

▍ Interrupción temprana de la reproducción del sonido.

function Demo() {
  // ,  ,  'rising-pops' :
  // - fanfare
  // - dun-dun-dun
  // - guitar-loop
  const soundUrl = '/sounds/rising-pops.mp3';

  const [play, { stop }] = useSound(
    soundUrl,
    { volume: 0.5 }
  );

  const [isHovering, setIsHovering] = React.useState(
    false
  );

  return (
    <Button
      onMouseEnter={() => {
        setIsHovering(true);
        play();
      }}
      onMouseLeave={() => {
        setIsHovering(false);
        stop();
      }}
    >
      <ButtonContents isHovering={isHovering}>
        Hover over me!
      </ButtonContents>
    </Button>
  );
}

▍Aumenta el tono

function Demo() {
  const soundUrl = '/sounds/glug-a.mp3';

  const [playbackRate, setPlaybackRate] = React.useState(0.75);

  const [play] = useSound(soundUrl, {
    playbackRate,
    volume: 0.5,
  });

  const handleClick = () => {
    setPlaybackRate(playbackRate + 0.1);
    play();
  };

  return (
    <Button onClick={handleClick}>
      <span role="img" aria-label="Heart">
      </span>
    </Button>
  );
}

▍ Botón para iniciar y pausar la reproducción

function Demo() {
  const soundUrl = '/sounds/guitar-loop.mp3';

  const [play, { stop, isPlaying }] = useSound(soundUrl);

  return (
    <PlayButton
      active={isPlaying}
      size={60}
      iconColor="var(--color-background)"
      idleBackgroundColor="var(--color-text)"
      activeBackgroundColor="var(--color-primary)"
      play={play}
      stop={stop}
    />
  );
}

▍Sonido "listas de sprites"

function Demo() {
  const soundUrl = '/sounds/909-drums.mp3';

  const [play] = useSound(soundUrl, {
    sprite: {
      kick: [0, 350],
      hihat: [374, 160],
      snare: [666, 290],
      cowbell: [968, 200],
    }
  });

  //  ,   'keydown',
  //    .
  useKeyboardBindings({
    1: () => play({ id: 'kick' }),
    2: () => play({ id: 'hihat' }),
    3: () => play({ id: 'snare' }),
    4: () => play({ id: 'cowbell' }),
  })

  return (
    <>
      <Button
        aria-label="kick"
        onMouseDown={() => play({ id: 'kick' })}
      >
        1
      </Button>
      <Button
        aria-label="hihat"
        onMouseDown={() => play({ id: 'hihat' })}
      >
        2
      </Button>
      <Button
        aria-label="snare"
        onMouseDown={() => play({ id: 'snare' })}
      >
        3
      </Button>
      <Button
        aria-label="cowbell"
        onMouseDown={() => play({ id: 'cowbell' })}
      >
        4
      </Button>
    </>
  );
}

Resumen