Reactアプリでサウンドを鳴らしてみた(use-sound 前編)

2021.09.29

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

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

use-soundとは

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

また前回のエントリで紹介したreact-soundと比べてメンテが活発に行われており、Reactの最新バージョンである17にも対応しています。

やってみた

普通にサウンドを鳴らす

デモ

ボタンをクリックするとサウンド再生できます。また再生中に停止とポーズもできます。

コード概要

use-soundはReact Hookとして使用できるパッケージであるため、簡潔なコードでサウンド再生機能をアプリに追加できます。

src/App.tsx

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

export const App: React.FC = () => {
  const [play, { stop, pause }] = useSound(Sound);

  return (
    <>
      <button onClick={() => play()}>音を鳴らす</button>
      <button onClick={() => stop()}>停止</button>
      <button onClick={() => pause()}>ポーズ</button>
    </>
  );
};

サウンドの音量を変える

デモ

押したボタンによって異なる音量のサウンドが鳴ります。

コード概要

volume0から1の範囲で指定して同じサウンドデータの音量を変えることができます。既定は1です。ミュートは0です。

src/App.tsx

export const App: React.FC = () => {
  const [playLoud] = useSound(Sound, { volume: 1 });
  const [playSoft] = useSound(Sound, { volume: 0.7 });
  const [playWhisper] = useSound(Sound, { volume: 0.3 });

  return (
    <>
      <button onClick={() => playLoud()}>
        音を鳴らす(大)
      </button>
      <button onClick={() => playSoft()}>
        音を鳴らす(中)
      </button>
      <button onClick={() => playWhisper()}>
        音を鳴らす(小)
      </button>
    </>
  );
};

サウンドの再生スピードを変える

デモ

押したボタンによってサウンドの再生スピートが異なります。

コード概要

playbackRate4から0.5の範囲で指定した倍速で再生スピードを変えることができます。

src/App.tsx

export const App: React.FC = () => {
  const [playFast] = useSound(Sound, { playbackRate: 2 });
  const [play] = useSound(Sound, { playbackRate: 1 });
  const [playSlow] = useSound(Sound, {
    playbackRate: 0.5
  });

  return (
    <>
      <button onClick={() => playFast()}>
        音を鳴らす(2倍速)
      </button>
      <button onClick={() => play()}>
        音を鳴らす(中)
      </button>
      <button onClick={() => playSlow()}>
        音を鳴らす(0.5倍速)
      </button>
    </>
  );
};

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

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

以上