Как добавить аудио на кнопку в React - PullRequest
Новая
       2

Как добавить аудио на кнопку в React

0 голосов
/ 09 апреля 2020

Я создаю игру - я sh веб-приложение с ReactJS.

У меня есть главное меню: Play, Score и др. c ...

Если пользователь нажимает кнопку play, появится список уровней, некоторые из них будут открыты, некоторые закрыто.

Я хочу воспроизводить звук / звук при нажатии кнопки. Если уровень заблокирован, выведите другой звук.

Теперь мне нужно иметь возможность нажимать разные кнопки, и HTML не мешает кнопке.

Так, например:

Я хочу добавить кнопку toclick toa, например «launchApple», и воспроизводить звук одновременно. Звук должен иметь такой код: 

  if (audio.paused) {
            audio.play();
        } else {
            audio.currentTime = 0
        }

Всегда.

Стили кнопок также необходимо использовать совместно, если бы нам нужно было создать еще один компонент audioButton.

AudioButton 

 <React.Fragment onClick={playAudio}>
            {children}
        </React.Fragment>

И для кнопки: 

function Button({ children, onClick }) {


    return (
        <button onClick={onClick} className="Button">
            {children}
        </button>
    );
}

Но, конечно, мы не можем нажать на фрагмент. Я также хочу иметь многоразовое аудио, и желательно, чтобы мы могли просто объявить новое аудио один раз.

Это мой код: https://github.com/AurelianSpodarec/touchtype-game/tree/master/src Это то, что я строю: https://touch-type.netlify.com/

Как я могу добавить аудио к кнопкам и вещи, фактически не оборачивая их в другой 'div', но также делая его многократно используемым со стилем?

1 Ответ

0 голосов
/ 09 апреля 2020

работал над чем-то похожим. Мы использовали audio-player-es6.
Объявили его как зависимость, и в проекте сохранены некоторые аудиофайлы, которые мы можем использовать для воспроизведения с помощью вышеуказанного пакета npm.
Попробуйте и дайте мне знать, как это идет.

Ссылка: https://www.npmjs.com/package/audio-player-es6

...