まるっとアプリ #08｜騒音計・音量メーター（大声大会・全コード＋作り方つき）
- 割引あり
スマホやPCのマイクで、まわりの音量を“リアルタイムにデシベル(dB)で測る”騒音計を、自分の手で作ってみませんか。
針のように動くメーター表示はもちろん、友達と最大音量を競う「大声大会」モード（カウントダウン→計測→ランキング保存）まで入っています。録音は一切せず、計算はすべてブラウザの中だけ。HTMLファイル1個で完結し、サーバーもライブラリもいりません。
この記事を買うと、完成品のアプリ一式（HTMLファイル1個）と、全コード＋作り方の解説が手に入ります。
■ シリーズ『まるっとアプリ』（第8回）
「買うと“動くアプリ”が手に入る。さらに全コードにコメント＆作り方の解説つき。改造もできる」――1記事完結のシリーズです。
#08 騒音計・音量メーター（大声大会つき） 👈 いまここ
各号は独立しているので、この記事だけ買えば完結します（#01〜#07は不要）。すべてHTML1ファイルで動く・サーバー不要・コピペで完成。
📣 Xでシェアしていただいた方は割引価格でお求めいただけます（note公開設定のSNSプロモーション機能）。応援していただけると、次の号を作る力になります🙌
🎤 まずは完成品で触ってみてください（無料）
「測定開始」を押してマイクを許可すると、まわりの音量がリアルタイムでdB表示されます。手を叩いたり声を出したりすると、数字とメーターがピョコッと反応します。「大声大会」タブに切り替えれば、3秒カウントダウンのあと3秒間の最大音量を計測し、ランキングに記録されます。完成品とまったく同じものを、無料で公開しています。
▶ デモ（無料・登録不要）
【無料】騒音測定・音量チェッカー｜大声大会モード搭載 | Mytool Studio
少し触ると、「そもそもブラウザって、マイクの音をどうやって“数字”にしているんだろう？」が気になってくるはずです。実はこの仕組み、マイクの波形を取り出して、その“大きさ”を計算しているだけなんです。そのカラクリを、この記事で全部開きます。
このアプリでできること
🎤 リアルタイム音量メーター：マイクの音をdB（デシベル）で表示。プロ機材っぽいデジタル数字＆VUメーター
🌈 6段階のレベル判定：静寂／静か／普通／うるさい／かなり／危険レベルを色で表示
📈 ピーク保持：計測中の最大音量を記録（瞬間的な大きな音ものがさない）
🏆 大声大会モード：3秒カウントダウン→3秒計測→結果モーダル→ランキング
🏅 ランキング自動保存：上位10名をブラウザに記録（localStorage）。次に開いても残る
🔒 完全ブラウザ内・録音なし：音声データはどこにも送信・保存されません
仕組みのざっくり解説（ここまで無料）
このアプリの心臓は、突きつめると次の3段構えです。
マイクを借りる（getUserMedia）：ブラウザに「マイク使っていい？」と許可をもらい、音の流れ（ストリーム）を受け取ります。
音を解析できる形にする（Web Audio API）：受け取った音を `AudioContext`→`AnalyserNode` という“解析装置”につなぎます。
波形の大きさを計算してdBにする：いまの一瞬の波形を取り出し、その**二乗平均平方根（RMS）**を求め、`20 × log10(rms)` でデシベルに変換します。
そして、このアプリには教材として面白いポイントが詰まっています。
マイク権限の取り方と、断られたときの対処（`NotAllowedError` などの出し分け）
音の「大きさ」を数値にする計算（RMS→dB変換の考え方）
数字をなめらかに見せる平滑化（指数移動平均という定番テク）
メーターのアニメーション（`requestAnimationFrame` ループ）
大声大会の逐次制御（カウントダウン→計測→結果を `async/await` できれいに並べる）
ランキングの保存と、入力名の安全な表示（localStorage＋XSS対策のエスケープ）
どれも「ブラウザでハードウェア（マイク）を使う」という、ちょっと未知の領域に踏み込む題材です。HTML1ファイルで完結し、外部ライブラリもサーバーもいりません。
ここから先は、その**全コード（コメント付き）**と、自分好みに改造する方法です。計測時間を変えたり、レベルの色や閾値を変えたり、dBの校正値を調整したりできます。
■ ご購入前にご確認ください
含まれるもの：HTMLファイル1個ぶんの全コード（CSS・JavaScript込み・コメント付き）と、作り方／改造の解説。
動作環境：PC・スマホのモダンなブラウザ（Chrome / Edge / Safari など）と、マイク搭載デバイス。マイクを使う都合上、`https`（またはローカルサーバー / `localhost`）で開く必要があります（理由と対処は「つまずきポイント」で解説）。
必要な知識：不要です。コピー＆貼り付けができれば動きます。改造もコメントの通りに進めればOK。
dBの精度について：表示される値はデバイスのマイク感度に依存するため、プロ用騒音計のような絶対精度はありません。同じ端末での相対比較（大声大会など）に向いた“目安”としてお使いください。
コードについて：個人利用・商用利用OK（自分のサイトやブログに置く・改造して使うのは自由）。ただしコードそのものの再配布・転売・テンプレート販売はご遠慮ください。
その他：本記事はプログラミング学習・娯楽を目的としたものです。返金は受け付けておりません。
それではどうぞ。
