Pokemon Game Sound Libraryで音楽を再生する
記事IT・テクノロジー
みなさんこんにちは。
小学2年生になる息子がいるのですが、
ポケモンが大好きです。
かつ、今後のICT教育を見据え、パソコンにはどんどん触れてほしいと思い、ポケモンアプリを開発しました。
アプリのご紹介については過去のブログをご参考ください。
今回はその中で、
Pokemon Game Sound Libraryからのダウンロード方法、
取得した音楽ファイルを再生するための実装方法など解説したいと思います。
Pokemon Game Sound Libraryから音楽データを取得する
まずは、Pokemon Game Sound Libraryにアクセスします。
オープニング画面からBGMが流れます。(この時点でテンションが上がりませんか？w
なお、常にサイトを開いている間は音楽が流れますのでPCの音量にはご注意ください！
ダウンロードをクリックします。
説明をよく読んで一番下の「ご利用のガイドラインはこちら」をクリックします。
ガイドラインをよく読んで「ダウンロードはこちら」をクリックします。
最後までスクロールすると、「利用規約に同意してダウンロードする」がアクティブになるのでクリックします。
「ポケットモンスター 赤・緑」をクリックします。
こちらの画面から好きな音楽をダウンロードします。
開発環境について
まずは、開発環境については、過去ブログで触れてますのでそちらをご参考ください。
実装について
まずは音楽ファイルの定数を宣言します。
const OpeningMusic = "＜音楽ファイルの格納先＞"
const GameMusic = "＜音楽ファイルの格納先＞"
const PokemonBatle = "＜音楽ファイルの格納先＞"
ちなみに各変数に設定している音楽は以下のように設定しています。
・OpeningMusic：～オープニング～
・GameMusic：マサキのもとへーハナダより
・PokemonBatle：戦い（VS野生ポケモン）
変数を用意します。
// 音楽が流れる
const [audio] = useState(new Audio(OpeningMusic))
const [gameMusic] = useState(new Audio(GameMusic))
const [battleAudio] = useState(new Audio(PokemonBatle))
const [isPlaying, setIsPlaying] = useState(false)
それぞれ再生を切り替える関数を実装します。
すべての再生を停止する関数も用意しています。
// オープニング音楽を再生
const startaudioPlay = () => {
audio.pause() // 停止
gameMusic.pause() // 停止
battleAudio.pause() // 停止
pokemonVictory.pause() // 停止
audio.currentTime = 0 // 常に先頭から再生
// 1秒待機する
setTimeout(() => {
audio.play() // 再生
}, 500) // 500ミリ秒 = 0.5秒待機
}
// ゲーム選択音楽を再生
const startGameMusicPlay = () => {
audio.pause() // 停止
gameMusic.pause() // 停止
battleAudio.pause() // 停止
pokemonVictory.pause() // 停止
gameMusic.currentTime = 0 // 常に先頭から再生
// 1秒待機する
setTimeout(() => {
gameMusic.play() // 再生
}, 500) // 500ミリ秒 = 0.5秒待機
}
// バトル音楽を再生
const startbattleAudioPlay = () => {
audio.pause() // 停止
gameMusic.pause() // 停止
battleAudio.pause() // 停止
pokemonVictory.pause() // 停止
battleAudio.currentTime = 0 // 常に先頭から再生
// 1秒待機する
setTimeout(() => {
battleAudio.play() // 再生
}, 500) // 500ミリ秒 = 0.5秒待機
}
// すべての音楽を停止する
const AllMusicPause = () => {
audio.pause() // 停止
gameMusic.pause() // 停止
battleAudio.pause() // 停止
pokemonVictory.pause() // 停止
}
コンポーネントを用意します。
ボタンをそれぞれ設置して、クリックしたらその音楽が再生されるような仕組みにしています。
すべての音楽を停止するボタンも用意しています。
各ボタンのonClickイベントに再生用に用意した関数を設定します。
{/* ボタン表示領域 */}
<Grid container spacing={2}>
<Grid item xs={4} align="center">
<Button
type="submit"
variant="contained"
sx={{ mt: 3, mb: 2 }}
style={{ borderRadius: '20px' }}
onClick={startaudioPlay}>
オープニング音楽再生
</Button>
</Grid>
<Grid item xs={4} align="center">
<Button
type="submit"
variant="contained"
sx={{ mt: 3, mb: 2 }}
style={{ borderRadius: '20px' }}
onClick={startGameMusicPlay}>
ゲーム音楽再生
</Button>
</Grid>
<Grid item xs={4} align="center">
<Button
type="submit"
variant="contained"
sx={{ mt: 3, mb: 2 }}
style={{ borderRadius: '20px' }}
onClick={startbattleAudioPlay}>
バトル音楽再生
</Button>
</Grid>
<Grid item xs={12} align="center">
<Button
type="submit"
variant="contained"
sx={{ mt: 3, mb: 2 }}
style={{ borderRadius: '20px' }}
onClick={AllMusicPause}>
音楽停止
</Button>
</Grid>
</Grid>
完成した画面は以下のようになります。
以上で完了です。
各ボタンをクリックすると音楽が再生されます。
最後に
いかがでしたでしょうか。
音楽を再生するとWebアプリにリッチな表現がプラスされます。
音楽を切り替える際には、もともと再生している音楽を停止する必要があり、
停止しない場合は、音楽が二重に再生されますので注意が必要です。
関数を自分自身で修正するなどしていろいろ検証してみてください。
サービスのご依頼について
Firebaseを使用したサービスを出品しております。
webアプリのスモールスケール開発サービスです。
販促、集客目的でwebアプリを作ってみたいけど、
まずは、小さな一歩から踏み出したいというお客様に向けたサービスです。
もちろんそうでないお客様も大歓迎！！！
Excel&VBAを活用したスクレイピングサービスになります。
サイトの情報をExcelに抽出したり、入力したり、
単純作業を自動化するサービスです。
Excel全般操作の自動化及び業務改善でお悩みのひとは。
お気軽にご相談ください。
最後まで読んでいただきありがとうございました。
