使用声音包：React应用程序中的声音效果

• 在网络的早期，一些页面播放了背景MIDI音乐。
• 弹出式诈骗者使用声音来达到他们的坏目标。他们借助声音寻求吸引用户的注意力，并使欺诈行为更加可信。
• 声音会出现在自动开始播放的视频中（嗯，这绝对是一场噩梦）。

总览

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

• 过早停止播放，以及暂停并继续播放。
• 下载诸如声音“精灵表”之类的东西并将其划分为单独的声音。
• 可以设置播放速度，以加快和减慢声音的播放速度。
• 很多事件监听器。
• 借助Howler，可以使用许多高级功能。

使用声音基础

▍安装

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

▍进口

import useSound from 'use-sound';

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

搜索并准备声音

s声音的准备

• 声音像字符串一样，可以用空白框起来。通常会切出无声片段，因此，在发声事件发生后立即会重现相应的声音效果。
• 准备声音时，您可能需要调整其音量，以使一个项目中使用的所有声音具有相同的音量。
• Freesound.org具有以各种音频格式存储的声音。您可能非常需要将您喜欢的声音转换为MP3。

声音和可用性

菜谱

▍复选框

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

▍及早中断声音再现

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

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

▍按钮开始和暂停播放

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

ound声音“精灵列表”

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

摘要