React で 音声を再生するには、色々な方法があります。
use-sound を利用することが一般的だと思います。
それでも、制御が細かくできないなどの場合には、audioタグを利用した再生方法がいちばん簡単です。
本記事では、簡単なサンプルプログラムで、audioタグを利用した音声再生方法を解説しています。
ぜひ、参考にして下さい。
サンプルプログラム
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
import React, { useRef } from 'react'; const SoundEffect = () => { const [wavFile, setWavFile] = useState('sound.mp3') const audioRef = useRef(null) const handlePlay = () => { audioRef.current.play() }; return ( <div> <audio ref={audioRef}> <source src={wavFile} type="audio/mpeg" /> </audio> <button onClick={handlePlay}>Play Sound</button> </div> ) } export default SoundEffect |
参考サイト
Integrating sound effects in React
https://edvins.io/integrating-sound-effects-in-react/
How to use audio in react
https://www.tabnine.com/code/javascript/classes/react/audio
