この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
こんにちは、CX事業本部 IoT事業部の若槻です。
今回はreact-sound
を使用してReactアプリでボタンクリック時にサウンドを鳴らしてみました。
react-soundとは
react-sound
を使用すればReactアプリケーションで音楽を再生したり、操作に応じて効果音を鳴らしたりする実装を行うことができます。
注意点として、react-soundはメンテが直近3年間行われておらず、Reactの最新バージョンである17にも未対応です。一方で、同じくReact向けのサウンド再生パッケージであるuse-sound
であれば比較的活発にメンテが行われているのでこちらのご利用もご検討ください。
やってみた
サウンドを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)
}
/>
</>
);
};
使用した音源データについて
使用したサウンドの音源データは効果ラボさんが配布しているフリー音源を使用させて頂きました。
参考
以上