サイバー風デザインのカウントダウンタイマー
timer.html をブラウザで開きます。インターネット接続なしでローカルでも動作します。以下の手順でセットアップしてください。
timer.html をブラウザで開きます。beep.wav はすでに同梱されているため、別途ファイルを用意する必要はありません。好みの音に変えたい場合は、任意の WAV ファイルを beep.wav という名前にして上書きしてください。
タイマー終了時のアラーム音として beep.wav を読み込みます。
このファイルが同じフォルダに存在しない場合でも、Web Audio API による代替ビープ音が自動で鳴るため、タイマー自体は正常に動作します。
beep.wav という名前で timer.html と同じフォルダに配置してください。timer.html 内の <audio> タグの src 属性を変更してください。
多くのモダンブラウザでは、ユーザー操作なしの音声自動再生がブロックされます。
タイマー開始時に START ボタンを押す操作がユーザーインタラクションとなるため、通常は問題ありませんが、
環境によっては音が鳴らないことがあります。その場合はブラウザの設定で音声の自動再生を許可してください。
timer.html の背景は transparent に設定されています。
OBS の「ブラウザソース」として追加すると、タイマー部分だけを配信画面に重ねて表示できます。
ブラウザで直接開いた場合は背景が白くなりますが、これは仕様です。
背景色を付けたい場合は、CSS の body の background を編集してください。