Reactアプリでサウンドを鳴らしてみた（use-sound 後編）

こんにちは、CX事業本部 IoT事業部の若槻です。

今回はuse-soundを使用してReactアプリでボタンクリック時にサウンドを鳴らしてみた、の後編です。（前編はこちら）

use-soundとは

use-soundを使用すればReactアプリケーションで音楽を再生したり、操作に応じて効果音を鳴らしたりする実装を行うことができます。

やってみた

再生の割り込み

デモ

左側のボタンを連打すると、既に再生されているサウンドを停止した上で次の音が再生されます（interrupt有効）。右側のボタンを連打すると、既に再生されているサウンドを停止させずに次のサウンドも重複して再生されます（interrupt無効）

コード概要

interruptがtrueの場合（既定）は前者、falseの場合は後者のボタンの再生動作となります。

import React from 'react';
import useSound from 'use-sound';
import Sound from './決定、ボタン押下4.mp3';
import './styles.css';

export const App: React.FC = () => {
  const [playInterrupt] = useSound(Sound, {
    interrupt: true
  });
  const [playNoInterrupt] = useSound(Sound, {
    interrupt: false
  });

  return (
    <>
      <button onClick={() => playInterrupt()}>
        音を鳴らす（interrupt有効）
      </button>
      <button onClick={() => playNoInterrupt()}>
        音を鳴らす（interrupt無効）
      </button>
    </>
  );
};

スプライト再生

デモ

それぞれのボタンで、一つの音源データの最初、中盤、終端部分を再生します。

コード概要

spriteを使うと音源データから[再生開始時点、再生時間]をMilliSecondで指定して部分再生ができます。これにより1つの音源データに複数のサウンドをまとめて1ファイルとできるため、多数の種類のサウンドを扱うwebページでロードを軽量化することができます。

export const App: React.FC = () => {
  const [play] = useSound(Sound, {
    sprite: {
      beginning: [0, 250],
      middle: [250, 200],
      end: [450, 200]
    }
  });

  return (
    <>
      <button onClick={() => play({ id: 'beginning' })}>
        音を鳴らす（beginning）
      </button>
      <button onClick={() => play({ id: 'middle' })}>
        音を鳴らす（middle）
      </button>
      <button onClick={() => play({ id: 'end' })}>
        音を鳴らす（end）
      </button>
    </>
  );
};

再生終了時に処理を実行

デモ

ボタンをクリックして開始したサウンドの再生が終了すると、サウンドの再生が終了しました!というメッセージウィンドウが開きます。

コード概要

export const App: React.FC = () => {
  const [play] = useSound(Sound, {
    onend: () => {
      window.alert('サウンドの再生が終了しました!');
    }
  });

  return (
    <>
      <button onClick={() => play()}>音を鳴らす</button>
    </>
  );
};

使用した音源データについて

使用したサウンドの音源データは効果ラボさんが配布しているフリー音源を使用させて頂きました。

• ボタン・システム音[1]｜効果音ラボ

以上