React ⚛️
June 12, 2024

React и проигрывание аудио

Проигрывание звуковых дорожек в React можно сделать с помощью готового хука use-sound. Для этого — установить пакет:

npm install use-sound

Выполнить импорт хука и файла с аудио-записью:

import useSound from 'use-sound';
import mySound from '@/../assets/sounds/sound.mp3' // assets располагается в папке resources

Использовать в коде так:

const MyButton = () => {
  const [playSound] = useSound(mySound);
  
  return (
    <button onClick={() => playSound()}>
       Play Sound
    </button>
  );
};

Или так:

const MyButton = () => {
  const [playSound] = useSound(mySound, { volume: 0.7 });
  
  const handleClick = () => {
    playSound();
    // ...
  };

  return (
    <button onClick={() => handleClick()}>
       Play Sound
    </button>
  );
};

Подробности можно посмотреть тут или на гитхаб.