ReactアプリにSoundFXを追加する

この記事では、 uifx という小さなライブラリを使用して、Reactアプリに効果音を組み込む方法を学びます。

効果音はアプリではあまり使用されません。 通常、BigTechのアプリで次のように表示されます。

• iOSキーボードは木製のタップ音を出します
• Twitter iOSアプリは、プルして更新すると「ブープ」という音を立てます
• 「HeyGoogle」と「HeySiri」は、名前を呼び出すと独特のミームトーンになります

私たちはこれらの「ノイズ」に慣れてきたので、もはや興味深い機能とは見なされていないと思います。 しかし、彼らはそうです！ Appleが突然キーボードから「カチカチ」という音を取り除くことにした場合を想像してみてください。 その馴染みのある音に慣れた私たちにとって、私たちはおそらくある種の奇妙な聴覚の剥奪を感じるでしょう。 しかし、Webアプリの場合、ユーザーインターフェイスにサウンドエフェクト（sfx）が組み込まれていることはほとんどありません。率直に言って、サウンドエフェクト（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>

基本的な使用法

これは、soundfxを使用して<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で、 AudioAPIをエミュレートします。 以下のデモでは、前の<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が、視覚と聴覚の両方で人々をより完全に引き付けるアプリの構築に役立つことを願っています。 このような小さなタッチは、人々の心に触れ、ユーザーにより豊かな体験を提供することができます。