Add Awesome Sound Effects to Your React Applications 🎵

In this tutorial, we will use a library called uifx to add cool sound effects in our react.js applications.

What is UIfx

UIfx is the most Robust and easiest sound library as compared to other libraries like Howler. This library is perfect for incorporating sound FX in react web applications.

Short Demo

import UIfx from 'uifx';
import beepSound from './my-sounds/beep.mp3';

const beep = new UIFx({asset: beepSound});

<button onClick={beep.play}>Play</button>

Practical Example

Here’s a practical example where sound fx is used to provide audio feedback on an <input type="range"/> element.

import React, { Component } from 'react';
import UIfx from 'uifx'; 
import tickSound from './my-sounds/tick.mp3';

const tick = new UIfx({asset: tickSound });

export default class InputRange extends Component {
  state = {
    value: 0,
  }
  onChange = (event) => {
    this.setState({ value: event.target.value });
    tick.play();
  }
  render() {
    return (
      <div>
        <div>{this.state.value}</div>
        <input
          type="range"
          value={this.state.value}
          onChange={this.onChange}
        />
      </div>
    )
  }
}

Don’t you get a mental picture of a watchmaker’s tool or something? How interesting is that?! Audio adds a completely new sensory experience!

Isn’t that amazing? with just a few lines of code, you’ve integrated sounds in your web app. So when the user changes the value of our range input element, our tick sound gets played 👍.

Changing Sound volume

By default, sounds will play at full volume. To change the volume you can call UIfx.setVolume() method:

beep.setVolume(0.8); // Valid arguments are 0.0 → 1.0
beep.play();

Conclusion

So that was it. My hope is that will help you build apps that engage people visually. Minor touches like this can touch people’s hearts and provide a more richer user experience.

Best Resources to learn React.js

Muhammad Mubeen

Muhammad Mubeen

Mubeen is a full-stack web & mobile app developer who is very proficient in MEAN.js, Vue, Python, Ionic 4, Flutter, Firebase, ROR, and PHP. He has created multiple mobile and web applications. He is very passionate about sharing his knowledge.

Comments 1

  1. Biggie says:

    Nice

Leave a Reply

Your email address will not be published. Required fields are marked *

Trending