BGMを付ける

なぜ要るか

効果音は「押した」を返す音でした。BGMは違います。その場の温度を決める音です。

無音のゲームは、静かというより止まって見えます。 曲が1本流れているだけで、画面が動いている感じになります。

そして、ここが一番大事なところです。BGMは気づかれない方が正しいです。

AIプロンプト

この術の作業をAIへ任せるときは、これをそのまま貼ってください。

Quiet Japanese night village BGM, ninja stillness under a deep indigo sky,
sparse shakuhachi breath and soft koto plucks, warm ambient pads,
gentle bell accents, calm with quiet tension,
restrained background melody that never draws attention,
very low density with plenty of space, seamless loop, over 2 minutes,
instrumental only, no vocals, drumless and percussion-free,
no taiko, no festival sound, no EDM drop, no sudden dynamics

世界観の言葉（夜の里、藍、尺八）の部分は、自分の企画の世界観に置き換えてください。後半の否定形はそのまま残してください。

音量で失敗します

先に数字を出します。見本ゲームの三つの的で実際に使っている音量です。

場面	音量
BGM（mp3の再生音量）	0.28
キャラの声（mp3の再生音量）	0.9
効果音（その場で合成する音の指定値）	0.05〜0.09

BGMは 0.28 です。同じmp3の再生音量である声の 0.9 と比べると、かなり小さいです。効果音の数字だけは物差しが違います。5-1でその場で合成している音の指定値なので、0.28 と 0.09 を並べて大小を比べても意味がありません。 耳で聞くと、BGMの 0.28 は効果音より小さく聞こえます。

理由は単純で、遊んでいる間に聞かせたいのはBGMではないからです。聞かせたいのは効果音と声です。BGMがそれを邪魔したら本末転倒になります。

タイトル専用のBGMは作っていません。曲は1本だけで、最初から最後まで同じものが流れます。 場面ごとに曲を分けるのは、1本で足りないと分かってからで間に合います。

最初は必ず大きすぎます。 自分で作った曲は愛着があるので、大きくしたくなります。そこを抑えるのが仕事です。

曲は1本でいい

これも増やしたくなるところです。最初は1本で足ります。

三つの的の曲も、Suno で作った1本だけです。実測でこうなっています。

assets/bgm.mp3   2分07秒   3.3MB   ループ再生

2分あれば足ります。 それ以上長くしても、遊んでいる人は気づきません。逆に30秒だと繰り返しに気づかれます。

やってみる

曲を作る

Suno が手軽です。頼み方はこの程度で足ります。

和風、忍者、軽快、ループ再生に向く、2分、歌なし

「歌なし」を必ず入れてください。 歌が入るとゲーム中に気になります。

ただし、これだけだと主張の強い曲が出てきます。ゲームのBGMは主役ではないので、次の3つを足します。

Quiet Japanese night village BGM, ninja stillness under a deep indigo sky,
sparse shakuhachi breath and soft koto plucks, warm ambient pads,
gentle bell accents, calm with quiet tension,
restrained background melody that never draws attention,
very low density with plenty of space, seamless loop, over 2 minutes,
instrumental only, no vocals, drumless and percussion-free,
no taiko, no festival sound, no EDM drop, no sudden dynamics

足したのはこの3つです。

足した指定	理由
never draws attention / low density	考えて選ぶゲームなので、曲が前に出ると手が止まる
drumless, percussion-free	拍が強いと急かされる。ドラムを抜くだけで一気に背景になる
no sudden dynamics	盛り上がりが来ると、そこが山場ではないのに山場に聞こえる

「どんな曲か」より「何をしないか」を書く方が効きます。 世界観の言葉（夜の里、藍、尺八）は雰囲気を決めるだけで、邪魔にならないかどうかは否定形でしか指定できません。

自分のGPUで回すなら ACE-Step も選べます。Apache 2.0 のオープンソースで、歌入りも作れます。オープンソースは中身が公開されていて、自分の環境で動かせるという意味です。Apache 2.0 はその使用条件の名前で、商用に使うことも認められています。

mp3 としてフォルダに置く

index.html
assets/koyori-guide.png
assets/bgm.mp3        ← 増えた

鳴らす

4行です。
```
var bgm = new Audio('assets/bgm.mp3');
bgm.loop = true;
bgm.volume = 0.28;      // 効果音より小さく。1.0にすると必ずうるさい
function bgmOn() { bgm.play().catch(function () { /* 曲が無い間は黙って進む */ }); }
```
1行目で、そのmp3を鳴らすための再生機を1つ用意しています。loop = true は最後まで行ったら先頭へ戻る指定、volume が音量です。play() は、ファイルが無いときやブラウザに止められたときに失敗します。catch はその失敗を受け止めて、何もせず先へ進めるための受け皿です。

catch を付けておくのが要点です。 曲ができる前でも、ファイルを差し替えている最中でも、ゲームは止まりません。音は「無くても遊べる」部品なので、無いときに落ちない形にしておきます。
音の入口をBGMにもつなぐ

5-1で作ったボタンに足します。音の解禁はBGMも同じで、操作なしでは鳴りません。
```
el('soundBtn').addEventListener('click', function () {
  soundOn = !soundOn;
  el('soundBtn').textContent = soundOn ? '音を止める' : '音を出す';
  if (soundOn) { bgmOn(); SE.eranbu(); } else { bgm.pause(); }
});
```
1つのボタンで効果音とBGMを両方切り替えます。 別々にすると、遊ぶ前に設定を2回考えさせることになります。
ループの継ぎ目を聞く

ここは必ず1回確認してください。曲が最後まで行って先頭へ戻る瞬間です。ループ再生は同じ曲を繰り返し流すことなので、遊んでいる人はこの継ぎ目を何度も聞きます。

僕は6秒の音で試して、末尾から先頭へ正しく戻ることを確認しました。継ぎ目が「ドンッ」と目立つ場合は、曲の終わりを少し無音にすると馴染みます。

同じ曲を何本か作って、継ぎ目で選ぶのが早いです。 Sunoは1回で複数本出るので、聞き比べて継ぎ目のいちばん自然なものを採用してください。

保存する

git add .
git commit -m "BGMを付けて、音のON/OFFをまとめた"
git push

ON/OFF は必ず付けます

これは機能ではなく礼儀の話です。

勝手に音が出るページは嫌われます。しかも人は、音が邪魔なとき設定を探さずにタブを閉じます。

だから最初の状態は音が出ない方にしておきます。5-1のボタンをそのまま使えば、これは自然に満たされます。

やり方は1つではありません。三つの的は、表紙の「はじめる」と「音なしではじめる」の2つのボタンで遊ぶたびに選んでもらう形です（6-9で作ります）。別作品の忍術ラボは、最初にBGMと効果音の確認を1回出して、答えを覚えておく形にしています。覚えておくなら、こう残します。

// 設定を残す。次に来たときに同じ状態から始められる
localStorage.setItem('sound', soundOn ? 'on' : 'off');

localStorage は、ブラウザに小さなメモを残しておける置き場です。タブを閉じても消えないので、次に開いたときに前回の答えから始められます。

どちらでも構いません。守るのは「勝手に鳴らさない」の1点です。

つまずきどころ

スマホで鳴らない

スマホの方が制限が厳しいです。画面を触る操作が1回必要なのは同じですが、機種によっては消音スイッチが効きます。ハード側の消音は、こちらからは解除できません。

曲が重い

3MBを超えると読み込みで待たされます。mp3で、音質はそこまで上げなくて構いません。 kbpsは1秒あたりに使うデータ量で、大きいほど音は良くなり、ファイルは重くなります。128kbpsあればゲームのBGMとしては十分です。三つの的の曲は3.3MBあるので、ここは僕もまだ下げられる場所です。

別のタブに切り替えても鳴り続ける

そのままだと鳴り続けます。気になる場合は、画面が隠れたら止めます。

document.addEventListener('visibilitychange', function () {
  if (document.hidden) bgm.pause();
  else if (soundOn) bgm.play();
});

visibilitychange は、そのタブが表に出ているかどうかが変わったときに呼ばれる仕掛けです。document.hidden が「いま隠れている」を表すので、隠れたら止めて、戻ってきたら鳴らし直しています。

ループの継ぎ目が目立つ

曲の作り方の問題です。「ループ再生に向く」と頼んでも、きれいに繋がらないことがあります。曲を作り直すより、音量を下げた方が早く解決します。 小さければ継ぎ目も目立ちません。

曲が気に入らない

何本か作って選んでください。曲は絵と違って当たり外れが分かりやすいので、判断が速く済みます。ゲームを開いて30秒遊んで、邪魔だと感じたら外れです。

公開して大丈夫か不安になる

使った道具の利用規約で決まります。公開する予定があるなら、1-7で書いたとおり先に確認してください。

Windows の場合

コードは同じです。音が出ない場合は、音量ミキサーでブラウザが消音になっていないか見てください。

次の一歩

BGMの音量を 0.28 から 0.6 に上げて、3回遊んでみてください。

たぶん邪魔に感じます。その「邪魔」の感覚を1回味わっておくと、以降は自分で下げられます。 数字を戻すときは 0.28 より少し下から試すと、ちょうどいい所が見つかります。

場の温度ができました。次はキャラに声を持たせて、4-3の口パクに答え合わせをします！

ここまでの三つの的

この講座は、見本ゲーム「三つの的」を術ごとにすこしずつ育てながら進みます。下にあるのはこの術を終えた時点の実物です。そのまま遊べます。

別の画面でこのゲームを開く