第8回：音が鳴らない問題と、タイトル画面の必要性

公開日：2026年05月09日

音のある世界へ

この日の課題は音だった。SEを入れればカードゲームはかなり気持ちよくなる。カードを出す音、ドロー音、押し付け音、レシート移動音、ハプニング発動音。ところが、最初に作った効果音版では、画面がフリーズしたり、ブラウザにはスピーカーマークが出ているのに音が聞こえなかったりした。

原因の一つは、ブラウザの音声再生制限だった。ページを開いた瞬間に音を鳴らすことは、多くのブラウザで制限される。ユーザーがクリックした後でなければ、AudioContextやBGM再生がうまく動かないことがある。

AIには、効果音をつけてほしい、BGMを鳴らしたい、タイトル画面にサウンドONボタンを置きたいと依頼した。最初は外部音源を読み込む方式を試し、その後、WebAudioで簡易音を鳴らす方式に切り替えた。

しかし、iframeでゲーム本体を読み込むタイトル版では、親画面のクリックで音声許可を得ても、iframe内のゲーム音声が解除されない可能性が出た。そこで、タイトル画面とゲーム本体を1つのHTMLに統合し、サウンドONでスタートする構造にした。

最初の効果音版は、関数名の置換ミスで壊れた。これはAIが既存コードに単純な文字列置換を行った時に起きた典型的なバグだった。修正版では、外部音源ではなくWebAudioで軽いSEを生成し、サウンドONボタンを押した後に鳴るようにした。

その後、BGMも試したが、最初のBGMはハム音のように聞こえた。低音を鳴らし続けるだけでは音楽とは呼べない。短い不穏ジングルに変えてみたが、それでもBGMとしては物足りない。結局、正式なBGMファイルを用意して、それを再生する方式に落ち着いた。

音は、ゲームの気持ちよさを大きく左右する。カードを出した時に音が鳴るだけで、操作が確定した感覚が出る。レシートが移動する時に少し嫌な音が鳴ると、手元に来たくない感じが強まる。

一方で、音量が大きすぎるとすぐに疲れる。BGMの音量は何度も下げ、最終的には現在の80%にする調整も入った。音は足せば良いわけではなく、プレイを邪魔しない範囲に抑えることが大事だった。

音まわりは、ローカルで開くか、http://localhostで開くか、実際のサーバーで開くかでも挙動が変わりやすい。ブラウザにはスピーカーマークが出ているのに音が聞こえないこともあった。これは音量の問題ではなく、AudioContextの開始やiframeの問題が絡んでいた。

この経験から、Webゲームではタイトル画面が単なる飾りではなく、サウンド許可を得るための実用的な画面でもあるとわかった。『サウンドONでスタート』は、見た目だけでなく技術的にも必要な導線だった。

次は、音が鳴る状態を前提に、ゲームテンポそのものを見直すことにした。どれくらいの時間で1ゲームが終わるのかを調べ、長引くならルール側で短縮する必要があった。