Pacote Use-Sound: Efeitos sonoros em aplicativos React

• Nos primeiros dias da web, algumas páginas tocavam música MIDI de fundo.
• Os golpistas pop-up usam sons para atingir seus objetivos ruins. Eles, com a ajuda dos sons, procuram atrair a atenção dos usuários e tornar a fraude mais crível.
• O som está presente nos vídeos iniciados automaticamente (bem, isso é absolutamente um pesadelo).

Visão geral

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

• Pare prematuramente a reprodução, bem como pause e retome a reprodução.
• Baixando algo como uma "folha de sprite" e dividindo-a em sons separados.
• Definir a velocidade de reprodução com a capacidade de acelerar e diminuir a reprodução de sons.
• Muitos ouvintes de eventos.
• Muitos recursos avançados disponíveis graças ao Howler.

Noções básicas sobre o uso do som

▍Instalação

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

▍ Importação

import useSound from 'use-sound';

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

Pesquise e prepare sons

▍Preparação de sons

• Sons, como cordas, podem ser enquadrados por espaços vazios. Os fragmentos de silêncio são geralmente cortados, como resultado, o efeito sonoro correspondente é reproduzido imediatamente após a ocorrência do evento sonoro.
• Ao preparar sons, pode ser necessário ajustar o volume deles, fazendo com que todos os sons usados ​​em um projeto tenham o mesmo volume.
• O Freesound.org possui sons armazenados em vários formatos de áudio. Você pode muito bem precisar converter os sons que você gosta em MP3.

Som e disponibilidade

Receitas

▍ caixa de seleção

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();
      }}
    />
  );
}

▍ Interrupção precoce da reprodução do som

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

PitchAumento do passo

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ão para iniciar e pausar a reprodução

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

OundSom "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>
    </>
  );
}

Sumário