将音效添加到您的React应用程序

在本文中，学习如何使用一个名为 uifx 的小型库在您的 React 应用程序中加入音效。

声音效果不经常用于应用程序。您通常只会在 Big Tech 的应用程序上看到它们，例如：

iOS 键盘发出木质敲击声
Twitter iOS 应用程序在您拉动刷新时会发出“砰”的一声
当您调用他们的名字时，“Hey Google”和“Hey Siri”具有独特的记忆音调

我认为我们已经习惯了这些“噪音”，以至于它们甚至不再被认为是有趣的功能。但他们是！想象一下，如果苹果突然决定从他们的键盘上删除“滴答声”。对于我们这些已经习惯了那种熟悉的噪音的人来说，我们可能会感到某种奇怪的听觉剥夺。然而，对于网络应用程序，我们几乎从未在用户界面中看到内置音效 (sfx)，坦率地说……我们几乎不希望它们存在。

iOS/Android 应用程序并不是唯一可以用声音表达自己的数字媒体。网络可以……而且应该更多地包含声音效果！

介绍 UIfx

我意识到有很多成熟的音频库，例如 SoundManager 或 Howler，但它们都不是为 UI 音效而设计的，需要即发即弃的播放策略迷你声音片段……所以我为此构建了一个简单的库，称为 uifx：

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

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

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

这里使用了 React，但您可以在任何具有 Audio API 的 JavaScript 环境中使用它——这是最现代的浏览器！

基本用法

这是一个实际示例，其中 sound fx 用于在 <input type="range"/> 元素上提供音频反馈。

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

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

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

你不知道制表师的工具之类的吗？这有多有趣？！音频增加了全新的感官体验！

节流播放

UIfx 专为快速连续播放微小的音频文件而设计。但是，有时您会想要稍微限制播放，以免听起来太疯狂或让用户的扬声器过载：

const tick = new UIfx({
  asset: tickAudio,
  throttleMs: 40
})

找到实时反馈的正确平衡更像是一门艺术，而不是一门科学。我通常尝试设身处地为用户着想，问自己想要多少即时音频反馈，并相应地进行节流。

更改播放音量

默认情况下，声音会以最大音量播放。要更改 UIfx 声音的音量，请调用 UIfx.setVolume() 方法：

beep.setVolume(0.8).play();

// or...

beep.setVolume(0.8);
beep.play();

有效参数是 0.0 → 1.0 以模拟 Audio api。在下面的演示中，使用之前的 <input type="range"> 滑块更改了音量：

class ToastNotifications extends Component {
  state = {
    isToastVisible: false,
    volume: 0.5,
  }
  sfx = {
    beep: new UIfx({asset: beepAudio}),
    tick: new UIfx({asset: tickAudio, throttleMs: 100}),
    appear: new UIfx({asset: appearAudio}),
    disappear: new UIfx({asset: disappearAudio})
  }
  onVolumeChange = (event) => {
    this.setState(
      { volume: event.target.value },
      // "setState" cb to get updated volume 👇
      () => this.sfx.tick.setVolume(this.state.volume).play()
    )
  }
  toggleToast = () => {
    this.setState(
      { isToastVisible: !this.state.isToastVisible },
      () => {
        this.state.isToastVisible  // 👈 decide which sfx to play
          ? this.sfx.appear.setVolume(this.state.volume).play()   
          : this.sfx.disappear.setVolume(this.state.volume).play()
      }
    )
  }
  render() {
    return (
      <div>

        <button onClick={this.toggleToast}>
          Toggle notification
        </button>

        <div>
          Volume: {this.state.volume}
        </div>
        <input
          value={this.state.volume}
          onChange={this.onVolumeChange}
          min="0.0"
          max="1.0"
          step="0.01"
          type="range"
        />

        <Toast isVisible={this.state.isToastVisible}/>

      </div>
    )
  }
}

如果您不想保留音量变化，您可以通过将参数传递给 UIfx.play() 轻松地以不同的音量播放：

const tick = new UIfx({
  asset: tickMp3,
  volume: 1.0
});

tick.play(0.25); // plays at 0.25 volume
tick.play(); // plays at 1.0 volume

结论

Web 应用程序中的音效是一个相对未开发的领域。我希望 uifx 将帮助您构建更充分地吸引人们的应用程序——包括视觉和听觉。像这样的小触动可以触动人心，为你的用户提供更丰富的体验。

📦 看看[uifx](https://github.com/wle8300/uifx)！我很想知道你的想法！