1.2.1BGMを変えよう
※電子書籍でご覧の方は、上記カラーボタンを押さないでください。
まえがき
この回では、スロットを回した時に流れる曲を
自分で用意した好きなものに変えていきます！
下準備
まず、BGMに設定したい音データをmp3で用意してください。
↑の言葉の意味がわからない人は、こちらを参考にしてください。
・BGMに設定したい音の用意の仕方 (準備中)
・mp3とは(Wikipedia)
用意できなかった人のために、こちらで作成したオリジナル曲を用意しました。
好きなものをダウンロードしてください。(再配布はご控えください)
右側にある︙を押すとダウンロードできます。
今回、私は「猫の休日.mp3」を上記からダウンロードして用意しました。
データの場所を確認しよう
デフォルトで設置されているBGMのデータは
assets/music/にあります。
別ウィンドウで実際にフォルダを開いてみましょう。
1~10までの音声データがあると思います。
これは、スロット画面の下にあるBGMリストの番号と同じです。
リスト番号1の音声データは1.mp3です。
musicの中には、1~10までの音声データと、
musicpostというフォルダがあります。
musicpostとは
musicpostとは、音データの保管場所です。
この後説明しますが、BGMのデータは上書きして保存し、
BGMの内容をカスタマイズしていくので、
この方法だと元々設定してあった音データが消えてしまいます。
なので、音データを保存するためにmusicpostというフォルダを設けました。
musicpostに保存する方法も合わせて
BGMを変更していきましょう。
BGMを変えてみよう
このプログラムでは、用意したmp3の名前を「1.mp3」など、もともと設置してあるデータと同じ名前にし、自分で用意したデータとすり替えて、BGMの内容を変更する という方法をとります。
こうすることで、プログラムのコードを書き換えるという 高度なことをしなくてもBGMを好きな音に変えることができるのです。
実際にやってみましょう。
用意したデータを移動させよう
まず、用意したデータをmusicpostに移動させます。
次に、musicpostにある用意したデータをmusicにコピー&ペーストします。
これで、music と musicpost の両方に用意したデータが入っている状態になります。
こうすることで、musicpostにデータを保存しておくことができます。
BGMを用意したデータにすり替えよう
用意した音声データの名前を、1~10 の中で 入れ替えたい場所の番号に変更します
デフォルトではBGMは2が最初に出てくるようになっているので、
「2」を最初に変更するのがおすすめです。
なので今回は、「2」を変更していきます。
まず、musicにあった「2.mp3」(すり替えたい番号のデータ)を削除します。
右クリック→ゴミ箱に入れる
用意した音声データを右クリックして
名前を変更 を押し、用意したデータの名前を
設定したい番号の数字に変えましょう。
このとき、数字は必ず半角で書いてください。
完成！
これで、BGMの変更は完了しました！
今回は2を変えましたが、他の番号も変えることができます。
このページを見返しながら他の番号も変えてみましょう！
確認してみよう
実際にindex.htmlをChromeで開いて
(すでに開いていたら再読み込み(リロード)をして)
BGMのリストを自分が設定した番号にし、
スロットを回すか、左下にあるBGMの試聴ができる再生プレイヤーで
用意したデータと同じ音が再生されるか確認しましょう。
トラブルシューティング
再生できなかったら
もし、再生されなかったら
・データの名前の数字が全角になっている、余計な文字が入っている
・形式がmp3以外になっている
・元々の音声データがおかしい(無音になってしまっている)
(再生して確認してください)
これらが原因の可能性があります。確認してください。
変更が反映されていなかったら
もし、BGMを変える前の曲が流れてしまう(反映されていない)場合は
・再読み込み(左上の丸い矢印)を押す
・もう一度index.htmlを開き直す
・BGMのリストを一度別の番号を選択してから戻す
一番強力なやり方は、
index.htmlをChromeで開いた状態で
右クリック→検証
英語表記のものが出てきたら、
再読み込みを右クリック→キャッシュの削除とハード再読み込み
これらの方法で反映されると思います。
※電子書籍でご覧の方は、下記カラーボタンを押さないでください。