react应用添加依赖

In this article, learn how to incorporate sound effects in your React apps using a small library called .

在本文中，学习如何使用名为的小型库在您的React应用程序中合并声音效果。

Sound effects aren’t used often for apps. You usually just see them on Big Tech’s apps like:

音效并不常用于应用程序。 通常您可以在Big Tech的应用程序上看到它们，例如：

• The iOS keyboard makes a wooden tap sound
  iOS键盘发出木质敲击声
• Twitter iOS app makes a “boop” noise when you pull-to-refresh
  推入刷新时，Twitter iOS应用会发出“嗡嗡声”
• “Hey Google” and “Hey Siri” have distinctive memed tones when you invoke their names
  调用Google的名称时，“ Hey Google”和“ Hey Siri”具有独特的音调

I think we’ve grown so accustomed to these “noises” that they’re not even considered interesting features anymore. But they are! Imagine if Apple suddenly decided to remove the “tick-tack” sound from their keyboard. For those of us who’ve gotten used to that familiar noise, we’d probably feel some kind of strange aural deprivation. Yet for web apps, we almost never see sound effects (sfx) built into the user interface and frankly… we almost don’t expect them to be there.

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

iOS/Android apps aren’t the only digital mediums that can express themselves with sounds. The web can… and should embrace sound effects more!

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

介绍UIfx (Introducing UIfx)

I realized there were a lot of full-fledged audio libraries like or , but none of them were designed for UI sound effects which require a fire-and-forget strategy for playing mini-sound bites… so I built a simple library for this called :

我意识到有很多完善的音频库，例如或 ，但是它们都不是为UI音效而设计的，它们需要一劳永逸的策略来播放小声音片段……所以我建立了一个简单的库，用于这叫做 ：

import UIfx from 'uifx';import mp3File from './my-sounds/beep.mp3';const beep = new UIFx({asset: mp3File});Signup

React is used here but you can use it in any JavaScript environment that has the Audio API –– which is most modern browsers!

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

基本用法 (Basic Usage)

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

这是一个实际示例，其中声音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 (      
    
        
     
      {this.state.value}
     
        
           
    
    )  }}

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!

您是否不了解制表师的工具或其他东西？ 那有多有趣？ 音频增加了全新的感官体验！

节流播放 (Throttling Playback)

UIfx is designed specifically for playing tiny audio files in rapid succession. Sometimes, however, you’ll want to throttle playback a bit so it doesn’t sound too crazy or overload the user’s speakers:

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

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

Finding the right balance of realtime feedback is more an art rather than a science. I usually try to put myself in user’s shoes and ask myself how much instant audio feedback I would want, and throttle accordingly.

在实时反馈之间找到适当的平衡，更多的是艺术而不是科学。 我通常会试着让自己陷入困境，并问自己我想要多少即时音频反馈，并相应地进行调节。

改变播放音量 (Changing playback volume)

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

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

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

Valid arguments are 0.0 → 1.0 to emulate the api. In the demo below the volume is changed using the previous <input type="range"> slider:

有效参数为0.0 → 1.0以模拟 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 (      
    
        
               Toggle notification                
     
                Volume: {this.state.volume}        
     
        
             
           
     
    
    )  }}

If you don’t want to persist volume changes, you can easily play at a different volume by passing an argument to UIfx.play():

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

const tick = new UIfx({  asset: tickMp3,  volume: 1.0});tick.play(0.25); // plays at 0.25 volumetick.play(); // plays at 1.0 volume

结论 (Conclusion)

Sound effects in web apps is a relatively unexplored domain. My hope is that uifx will help you build apps that engage people more fully –– both visual and aural. Small touches like this can touch people’s hearts and provide more richer exeriences to your users.

Web应用程序中的声音效果是一个尚未开发的领域。 我的希望是uifx将帮助您构建可在视觉和听觉上更充分地吸引人们的应用程序。 这样的细微触摸可以打动人们的心灵，并为用户提供更丰富的体验。

📦 Check out [uifx](https://github.com/wle8300/uifx)! I’d love to know what you think!

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

翻译自:

react应用添加依赖