Создавая приложение для детей, я хотел добавить несколько интерактивных звуков, чтобы сделать его более привлекательным и увлекательным. Мне удалось добавить различные звуковые эффекты, которые можно нажимать, интерфейс приложений был создан на React, так что вот один из способов сделать это!

Чтобы добавить интерактивные звуковые эффекты в свое приложение React, вы можете сначала создать новый компонент реакции. Поскольку звуковые эффекты в этом случае являются интерактивными, сделайте этот компонент компонентом класса, чтобы вы могли установить состояние по умолчанию «play» на false и включать и выключать звук. Вы можете загрузить звуковые файлы или использовать уже имеющийся звуковой файл, импортировать звук в файл js для этого компонента, затем внутри класса создать звуковой компонент и присвоить ему соответствующее имя переменной (пример звукового эффекта собаки лай):

audioDog = new Audio(dog)

В этом примере «собака» - это импортированный аудиофайл. Затем мы можем создать функцию переключения, чтобы переключать состояние «play» с true на false. Если состояние истинно, мы можем вызвать функцию воспроизведения для аудиофайла, а если оно ложно, мы можем вызвать функцию паузы для аудиофайла. Play () и pause () - встроенные функции, которые мы можем вызывать для аудиофайлов.

togglePlayDog = () => {
  this.setState({ play: !this.state.play }, () => {
    this.state.play ? this.audioDog.play() : this.audioDog.pause();
  });
}

При этом, когда вызывается функция togglePlayDog, она изменяет состояние с true на false или наоборот. Затем функция вызовет play () или pause () для аудиофайла в зависимости от того, является ли состояние истинным или ложным из-за тернарного оператора.

Наконец, чтобы эта работа работала, вам нужно вызвать созданную функцию «togglePlayDog». Один из простых способов добиться этого - разместить прослушиватель кликов на странице, и вы можете разместить его где угодно, например, изображение или гифку. В этом примере кода я помещаю прослушиватель кликов на гифку с лающей собакой.

<img scr="/dog-bark.gif" alt="dog" onClick={this.togglePlayDog} />

При этом, нажав на гифку, вы можете воспроизвести и приостановить воспроизведение аудиофайла!

В документации MDN объясняется использование аудио конструктора: https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement/Audio