Pokemon Game Sound Libraryで音楽を再生する

みなさんこんにちは。

小学2年生になる息子がいるのですが、

ポケモンが大好きです。

かつ、今後のICT教育を見据え、パソコンにはどんどん触れてほしいと思い、ポケモンアプリを開発しました。

ゲームボーイカラー風ポケモンアプリ

参考：ゲームボーイカラー風ポケモンアプリ

開発したポケモンアプリの詳細については過去の記事で紹介させていただいております。

PokemonAPIを使用してポケモンアプリを開発しました

今回はこちらのアプリの中で初代ポケモンで使用されているBGMを使用しているのですが、

そちらの再生方法について解説していきたいと思います。

この記事がおすすめな人

今回の記事は以下の人に特におすすめです。

React：初学者、初級者～中級者
アプリを開発したい人
手順だけを知りたい人
コードだけを知りたい人

手順

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>

完成した画面は以下のようになります。