Paket Penggunaan-suara: Efek Suara di Aplikasi Bereaksi

• Pada hari-hari awal web, beberapa halaman memainkan musik MIDI latar belakang.
• Scammer pop-up menggunakan suara untuk mencapai tujuan buruk mereka. Mereka, dengan bantuan suara, berusaha menarik perhatian pengguna dan membuat penipuan lebih bisa dipercaya.
• Suara hadir dalam video yang dimulai secara otomatis (well, ini benar-benar mimpi buruk).

Gambaran

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

• Hentikan pemutaran sebelum waktunya, serta jeda dan lanjutkan pemutaran.
• Mengunduh sesuatu seperti “sprite sheet” suara dan membaginya menjadi suara yang terpisah.
• Mengatur kecepatan pemutaran dengan kemampuan untuk mempercepat dan memperlambat pemutaran suara.
• Banyak pendengar acara.
• Banyak fitur canggih yang tersedia berkat Howler.

Dasar-dasar penggunaan-suara

Stall Instalasi

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

▍ Impor

import useSound from 'use-sound';

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

Cari dan siapkan suara

▍Persiapan suara

• Suara, seperti string, dapat dibingkai oleh ruang kosong. Fragmen keheningan biasanya dipotong, sebagai akibatnya, efek suara yang sesuai direproduksi segera setelah terjadinya peristiwa bersuara.
• Saat menyiapkan suara, Anda mungkin perlu menyesuaikan volumenya, sehingga semua suara yang digunakan dalam satu proyek memiliki volume yang sama.
• Freesound.org menyimpan suara dalam berbagai format audio. Anda mungkin perlu mengubah suara yang Anda suka ke MP3.

Suara dan Ketersediaan

Resep

▍ Kotak centang

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

▍ Gangguan awal reproduksi suara

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

▍Meningkatkan pitch

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

▍ Tombol untuk memulai dan menjeda pemutaran

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

OundMenemukan “daftar sprite”

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

Ringkasan