حزمة استخدام الصوت: المؤثرات الصوتية في تطبيقات التفاعل

• في الأيام الأولى للويب ، قامت بعض الصفحات بتشغيل موسيقى 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';

بحث وإعداد الأصوات

reإعداد الأصوات

• يمكن تأطير الأصوات ، مثل السلاسل ، بمساحة فارغة. عادة ما يتم قطع أجزاء الصمت ، ونتيجة لذلك ، يتم إعادة إنتاج التأثير الصوتي المقابل مباشرة بعد حدوث الحدث المعبر عنه.
• عند إعداد الأصوات ، قد تحتاج إلى ضبط مستوى صوتها ، بحيث تكون جميع الأصوات المستخدمة في مشروع واحد لها نفس مستوى الصوت.
• يحتوي موقع 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>
  );
}

زيادة درجة الصوت

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

▍ صوت "قوائم العفريت"

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

ملخص