在本文中,了解如何使用名为 uifx的小库将音效集成到您的 React 应用程序中。
音效不经常用于应用程序,你通常只能在Big Tech的应用程序中看到它们,例如:
- iOS 键盘发出木头敲响音
- Twitter iOS 应用程序发出
跳跃噪音,当你拖到刷新 *嘿 Google和嘿 Siri在召唤他们的名字时有独特的 memed 音调
我想我们已经习惯了这些噪音,他们甚至不再被认为是有趣的功能,但他们是! 想象一下,如果苹果突然决定从他们的键盘上删除tick-tack声音。 对于那些已经习惯了熟悉的噪音的人来说,我们可能会感觉到某种奇怪的耳朵剥夺。
iOS / Android应用程序不是唯一可以用声音表达自己的数字媒体,网络可以...而且应该更多地拥抱声音效果!
引入 UIFX
我意识到有许多全功能的音频库,如 SoundManager或 Howler,但它们都不是为用户界面音效而设计的,这需要播放迷你声音咬伤的火和忘记策略......所以我为此构建了一个简单的库,称之为 uifx:
1import UIfx from 'uifx';
2import mp3File from './my-sounds/beep.mp3';
3
4const beep = new UIFx({asset: mp3File});
5
6<button onClick={beep.play}>Signup</button>
React在这里使用,但你可以在任何具有音频API的JavaScript环境中使用 - 这是大多数现代浏览器!
基本使用
以下是一個實用的例子,其中音频 fx 被用來提供對 <input type="range"/> 元素的音訊反馈。
1import React, { Component } from 'react';
2import UIfx from 'uifx';
3import tickAudio from './my-sounds/tick.mp3';
4
5const tick = new UIfx({asset: tickAudio});
6
7export default class InputRange extends Component {
8 state = {
9 value: 0,
10 }
11 onChange = (event) => {
12 this.setState({ value: event.target.value });
13 tick.play();
14 }
15 render() {
16 return (
17 <div>
18 <div>{this.state.value}</div>
19 <input
20 type="range"
21 value={this.state.value}
22 onChange={this.onChange}
23 />
24 </div>
25 )
26 }
27}
你没有得到手表制造商的工具或其他东西的心理形象吗?这是多么有趣?! 音频添加了一个全新的感官体验!
打击Playback
UIfx是专为快速连续播放小型音频文件而设计的,但有时你会想稍微放松播放,以免听起来太疯狂或过度加载用户的扬声器:
1const tick = new UIfx({
2 asset: tickAudio,
3 throttleMs: 40
4})
寻找正确的实时反馈平衡是艺术而不是科学,我通常试图把自己放在用户的鞋子里,并问自己我想要多少即时音频反馈,并相应地吐槽。
更改播放量
默认情况下,声音将以全音量播放. 若要更改UIfx声音的音量,请使用UIfx.setVolume()方法:
1beep.setVolume(0.8).play();
2
3// or...
4
5beep.setVolume(0.8);
6beep.play();
有效参数为 0.0 → 1.0 以模拟 Audio api. 在下面的演示文稿中,使用以前的 <input type="range"> 滑板更改了音量:
1class ToastNotifications extends Component {
2 state = {
3 isToastVisible: false,
4 volume: 0.5,
5 }
6 sfx = {
7 beep: new UIfx({asset: beepAudio}),
8 tick: new UIfx({asset: tickAudio, throttleMs: 100}),
9 appear: new UIfx({asset: appearAudio}),
10 disappear: new UIfx({asset: disappearAudio})
11 }
12 onVolumeChange = (event) => {
13 this.setState(
14 { volume: event.target.value },
15 // "setState" cb to get updated volume 👇
16 () => this.sfx.tick.setVolume(this.state.volume).play()
17 )
18 }
19 toggleToast = () => {
20 this.setState(
21 { isToastVisible: !this.state.isToastVisible },
22 () => {
23 this.state.isToastVisible // 👈 decide which sfx to play
24 ? this.sfx.appear.setVolume(this.state.volume).play()
25 : this.sfx.disappear.setVolume(this.state.volume).play()
26 }
27 )
28 }
29 render() {
30 return (
31 <div>
32
33 <button onClick={this.toggleToast}>
34 Toggle notification
35 </button>
36
37 <div>
38 Volume: {this.state.volume}
39 </div>
40 <input
41 value={this.state.volume}
42 onChange={this.onVolumeChange}
43 min="0.0"
44 max="1.0"
45 step="0.01"
46 type="range"
47 />
48
49 <Toast isVisible={this.state.isToastVisible}/>
50
51 </div>
52 )
53 }
54}
如果您不想坚持音量变化,您可以通过将参数传输到 `UIfx.play() 来轻松地在不同的音量下播放:
1const tick = new UIfx({
2 asset: tickMp3,
3 volume: 1.0
4});
5
6tick.play(0.25); // plays at 0.25 volume
7tick.play(); // plays at 1.0 volume
结论
网络应用中的声音效果是一个相对未被探索的领域,我的希望是uifx将帮助您构建更充分地吸引人们的应用程序 - 视觉和听觉。
<$>[注] 查看「uifx」!我很想知道你在想什么! <$>