
Reactアプリでサウンドを鳴らしてみた(use-sound 前編)
この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
こんにちは、CX事業本部 IoT事業部の若槻です。
今回はuse-sound
を使用してReactアプリでボタンクリック時にサウンドを鳴らしてみた、の前編です。
use-soundとは
use-sound
を使用すればReactアプリケーションで音楽を再生したり、操作に応じて効果音を鳴らしたりする実装を行うことができます。
また前回のエントリで紹介したreact-sound
と比べてメンテが活発に行われており、Reactの最新バージョンである17にも対応しています。
やってみた
普通にサウンドを鳴らす
デモ
ボタンをクリックするとサウンド再生できます。また再生中に停止とポーズもできます。
コード概要
use-sound
はReact Hookとして使用できるパッケージであるため、簡潔なコードでサウンド再生機能をアプリに追加できます。
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>
</>
);
};
サウンドの音量を変える
デモ
押したボタンによって異なる音量のサウンドが鳴ります。
コード概要
volume
を0
から1
の範囲で指定して同じサウンドデータの音量を変えることができます。既定は1
です。ミュートは0
です。
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>
</>
);
};
サウンドの再生スピードを変える
デモ
押したボタンによってサウンドの再生スピートが異なります。
コード概要
playbackRate
を4
から0.5
の範囲で指定した倍速で再生スピードを変えることができます。
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>
</>
);
};
使用した音源データについて
使用したサウンドの音源データは効果ラボさんが配布しているフリー音源を使用させて頂きました。
以上