उपयोग-ध्वनि पैकेज: प्रतिक्रिया अनुप्रयोगों में ध्वनि प्रभाव

• वेब के शुरुआती दिनों में, कुछ पृष्ठों ने पृष्ठभूमि मिडी संगीत खेला।
• पॉप-अप स्कैमर अपने बुरे लक्ष्यों को प्राप्त करने के लिए ध्वनियों का उपयोग करते हैं। वे, ध्वनियों की सहायता से, उपयोगकर्ताओं का ध्यान आकर्षित करने और धोखाधड़ी को अधिक विश्वसनीय बनाने की कोशिश करते हैं।
• ध्वनि स्वचालित रूप से वीडियो शुरू करने में मौजूद है (ठीक है, यह बिल्कुल एक बुरा सपना है)।

अवलोकन

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

• समय से पहले प्लेबैक बंद करें, साथ ही प्लेबैक को रोकें और फिर से शुरू करें।
• ध्वनि "स्प्राइट शीट" जैसी कोई चीज डाउनलोड करना और उसे अलग-अलग ध्वनियों में विभाजित करना।
• ध्वनि की गति को धीमा करने और ध्वनि प्लेबैक को धीमा करने की क्षमता के साथ प्लेबैक गति सेट करना।
• घटना के श्रोताओं के बहुत सारे।
• हॉवेलर के लिए कई उन्नत सुविधाएँ उपलब्ध हैं।

उपयोग-ध्वनि मूल बातें

▍Installation

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

▍ आयात करें

import useSound from 'use-sound';

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

ध्वनियों को खोजें और तैयार करें

Ation ध्वनियों का संक्षिप्तिकरण

• ध्वनि, जैसे तार, को खाली स्थान द्वारा फंसाया जा सकता है। मौन खंडों को आमतौर पर काट दिया जाता है, परिणामस्वरूप, ध्वनि की घटना की घटना के तुरंत बाद इसी ध्वनि प्रभाव को पुन: पेश किया जाता है।
• ध्वनियों को तैयार करते समय, आपको उनकी मात्रा को समायोजित करने की आवश्यकता हो सकती है, जिससे यह बनता है कि एक परियोजना में उपयोग की जाने वाली सभी ध्वनियों में समान मात्रा होती है।
• Freesound.org की आवाज़ विभिन्न ऑडियो प्रारूपों में संग्रहीत है। आपको अपनी पसंद की ध्वनियों को एमपी 3 में बदलने की बहुत आवश्यकता हो सकती है।

ध्वनि और उपलब्धता

व्यंजनों

▍ चेक बॉक्स

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

Roduction ध्वनि प्रजनन की प्रारंभिक रुकावट

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

▍Sound "स्प्राइट सूची"

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

सारांश