Package Use-sound: Effets sonores dans les applications React

• Au début du Web, certaines pages diffusaient de la musique de fond MIDI.
• Les escrocs contextuels utilisent des sons pour atteindre leurs mauvais objectifs. Ils, à l'aide de sons, cherchent à attirer l'attention des utilisateurs et à rendre la fraude plus crédible.
• Le son est présent dans les vidéos à démarrage automatique (enfin, c'est absolument un cauchemar).

Aperçu

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

• Arrêtez la lecture prématurément, interrompez et reprenez la lecture.
• Télécharger quelque chose comme une «feuille de sprite» sonore et la diviser en sons séparés.
• Réglage de la vitesse de lecture avec la possibilité d'accélérer et de ralentir la lecture des sons.
• Beaucoup d'auditeurs d'événements.
• Nombreuses fonctionnalités avancées disponibles grâce à Howler.

Bases de l'utilisation du son

▍Installation

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

▍ Importer

import useSound from 'use-sound';

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

Rechercher et préparer des sons

▍Préparation des sons

• Les sons, comme les cordes, peuvent être encadrés par un espace vide. Les fragments de silence sont généralement coupés, de sorte que l'effet sonore correspondant est reproduit immédiatement après l'occurrence de l'événement exprimé.
• Lors de la préparation des sons, vous devrez peut-être régler leur volume, de sorte que tous les sons utilisés dans un projet aient le même volume.
• Freesound.org a des sons stockés dans différents formats audio. Vous pourriez très bien avoir besoin de convertir les sons que vous aimez en MP3.

Son et disponibilité

Recettes

▍ Case à cocher

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

▍ Interruption précoce de la reproduction sonore

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

▍Augmentation de la hauteur

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

▍ Bouton pour démarrer et suspendre la lecture

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

▍Son «listes 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>
    </>
  );
}

Sommaire