React で 音楽などの音声を再生するには、 use-sound を利用するのが一般的です。
使い方も非常に簡単で、直感的に利用できる点も、人気がある理由です。
今回は、この use-sound を利用した、音声ファイルの再生方法を説明いたします。
また、use-sound は、 react-sound と比較して、メンテナンスやバージョンアップも活発にされているので、とても安定して利用することができます。
インストール方法
npm の場合には、下記のコマンドを実行します。
|
1 |
$ npm install use-sound |
サンプル
|
1 2 3 4 5 6 7 8 9 10 |
import useSound from 'use-sound'; import sfx from '../sounds/sample.mp3'; export default function Sample() { const [play] = useSound(sfx) return <button onClick={play}>再生</button> }; |
上記のように、再生ファイルを固定で指定する以外にも、ファイルを動的に指定することも可能です。
|
1 |
const [play] = useSound('/demo.mp3') |
また、ローカルファイル以外にも、urlの指定も可能となっています。
|
1 |
const [play] = useSound('https://hogeohge.com/sound/demo.wav') |
公式サイト
use-sound
https://www.npmjs.com/package/use-sound
