Elsaの技術日記(徒然なるままに)

主に自分で作ったアプリとかの報告・日記を記載

MENU

React 音声出力方法

今までワニたたきゲームを作ってきたわけですが、
elsammit-beginnerblg.hatenablog.com



完成したアプリが何か物足りない。。。

なぜだろう??


昔遊んだ某ゲームを思い出してみたところ、、、


音声がないんだ!!


音声がないからなんかタッチしててもなんか虚無感を感じていたんだ!!


ということで、Reactで音声出力させる方法の調査と、実際にワニたたきゲームに組み込んでみたので報告。

■音声出力方法

こちらのようにaudioを生成し、それを実行すれば音声が出力できます。

const audio = new Audio(音声ファイルパス);
audio.play();

とても簡単に音声出力させることができました!!

補足ですが、下記のようにすると音声をスキップさせて再生させることができるようです。
※要するに、30をセットすると30秒経過した後の音声が出力されます。

const audio = new Audio(音声ファイルパス);
audio.play();
audio.currentTime = 30 ←ここが追加.

■ワニたたきへの反映

実際に音声出力を入れ込んだアプリを下記にアップします。
ワニたたきゲーム


実際に使用した音声はこちらから収集しました。
効果音 検索結果 『 がぶ 』
ゲームの戦闘|声素材|効果音ラボ


また、ソースコードはこちらになります。
https://github.com/Elsammit/waniwanipanic.git


■最後に

ワニたたきはこれで以上にしようかな?と思っております。
引き続き、勉強も兼ねてWebアプリを作っていきたいな!と思っております。

後、フロントサイドばかりやっているのでそろそろサーバサイドも作っていきたいな。と思っている今日この頃。
色々やりたいことがある。。。w