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

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

今回はreact-soundを使用してReactアプリでボタンクリック時にサウンドを鳴らしてみました。

react-soundとは

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

• react-sound - npm

注意点として、react-soundはメンテが直近3年間行われておらず、Reactの最新バージョンである17にも未対応です。一方で、同じくReact向けのサウンド再生パッケージであるuse-soundであれば比較的活発にメンテが行われているのでこちらのご利用もご検討ください。

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

やってみた

サウンドを1回だけ鳴らせるボタン

デモ

ボタンを押すと一度だけサウンドを鳴らすことができます。

コード概要

ボタンクリック時にSoundモジュールのplayStatusをPLAYINGに変更することにより指定のサウンドを再生することができます。

src/App.tsx

import React, { useState } from 'react';
import Sound from 'react-sound';
import Music from './決定、ボタン押下4.mp3';
import './styles.css';

export const App: React.FC = () => {
  const [SoundStatus, setSoundStatus] = useState('STOPPED');

  const handleSoundPlay = () => {
    setSoundStatus(Sound.status.PLAYING);
  };

  return (
    <>
      <button onClick={handleSoundPlay}>音を鳴らす</button>
      <Sound
        url={Music}
        autoLoad={true}
        playStatus={SoundStatus}
        playFromPosition={0}
      />
    </>
  );
};

サウンドを何度でも鳴らせるボタン

デモ

ボタンを押すと何度でもサウンドを鳴らすことができます。サウンドが鳴り止むまでは次のサウンドを鳴らせません。

コード概要

SoundモジュールでonFinishedPlayingによりサウンド再生完了後にplayStatusをSTOPPEDに変更することにより、何度でもサウンドを鳴らせるようにしています。

src/App.tsx

import React, { useState } from 'react';
import Sound from 'react-sound';
import Music from './決定、ボタン押下4.mp3';
import './styles.css';

export const App: React.FC = () => {
  const [SoundStatus, setSoundStatus] = useState('STOPPED');

  const handleSoundPlay = () => {
    setSoundStatus(Sound.status.PLAYING);
  };

  return (
    <>
      <button onClick={handleSoundPlay}>音を鳴らす</button>
      <Sound
        url={Music}
        autoLoad={true}
        playStatus={SoundStatus}
        playFromPosition={0}
        onFinishedPlaying={() =>
          setSoundStatus(Sound.status.STOPPED)
        }
      />
    </>
  );
};

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

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

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

参考

• determined-liskov-5ts60 - CodeSandbox

以上