Use-Sound-Paket: Soundeffekte in React-Anwendungen

• In den frühen Tagen des Web spielten einige Seiten Hintergrund-MIDI-Musik.
• Pop-up-Betrüger verwenden Sounds, um ihre schlechten Ziele zu erreichen. Mit Hilfe von Geräuschen versuchen sie, die Aufmerksamkeit der Benutzer auf sich zu ziehen und Betrug glaubwürdiger zu machen.
• Der Ton ist in automatisch startenden Videos vorhanden (nun, das ist absolut ein Albtraum).

Überblick

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

• Stoppen Sie die Wiedergabe vorzeitig, halten Sie die Wiedergabe an und setzen Sie sie fort.
• Laden Sie so etwas wie ein Sound-Sprite-Sheet herunter und teilen Sie es in separate Sounds auf.
• Einstellen der Wiedergabegeschwindigkeit mit der Möglichkeit, die Wiedergabe von Sounds zu beschleunigen und zu verlangsamen.
• Viele Event-Listener.
• Dank Howler sind viele erweiterte Funktionen verfügbar.

Use-Sound-Grundlagen

▍Installation

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

▍ Importieren

import useSound from 'use-sound';

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

Sounds suchen und vorbereiten

▍Vorbereitung von Tönen

• Klänge wie Saiten können durch Leerzeichen eingerahmt werden. Stillefragmente werden normalerweise ausgeschnitten, wodurch der entsprechende Soundeffekt unmittelbar nach dem Auftreten des stimmhaften Ereignisses wiedergegeben wird.
• Wenn Sie Sounds vorbereiten, müssen Sie möglicherweise deren Lautstärke so einstellen, dass alle in einem Projekt verwendeten Sounds dieselbe Lautstärke haben.
• Freesound.org hat Sounds in verschiedenen Audioformaten gespeichert. Möglicherweise müssen Sie die gewünschten Sounds in MP3 konvertieren.

Sound und Verfügbarkeit

Rezepte

▍ Kontrollkästchen

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

▍ Frühzeitige Unterbrechung der Tonwiedergabe

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

▍Erhöhende Tonhöhe

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

▍ Taste zum Starten und Unterbrechen der Wiedergabe

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

▍Sound "Sprite-Listen"

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

Zusammenfassung