竹蝉：ゼロ依存の単一ファイルで、Web Audioを使って伝統玩具の「ワーワー」という音を再現

子供の頃、道端の屋台で売っていた数元の竹蝉を覚えていますか？回すと「ワー、ワー」と鳴き、うるさいけれど魅了されるものでした。今では実物を見つけるのが難しくなりましたが、ある開発者が純粋なフロントエンド技術でそれをブラウザに持ち込みました——竹蝉（zhuzhiliao）は、ゼロ依存の単一ファイルのWebシミュレーションで、実際の録音サンプル、モバイルファースト、開くだけで遊べます。

なぜ注目に値するのか？

このプロジェクトの最も魅力的な点は、その極簡さと深さの共存です：

ゼロ依存の単一ファイル：アプリ全体が単一の index.html で、Canvasレンダリング、Web Audioオーディオ処理、録音サンプル、さらにはPWAのマニフェストとサービスワーカーが埋め込まれています。ビルド不要、ネットワーク不要、ダブルクリックで遊べます。
実際の物理シミュレーション：竹筒はロープでつながれた質点としてモデル化され、重力、弾性ロープ、空気抵抗を、1/240秒の固定ステップで積分します。音を出すための核心変数はロープ方向の角速度です——速く回すほど、ロープが張り、音が大きく明るくなります。
実際の録音サンプル：メインの音源は、実写ビデオから切り出した1.72秒の録音（ちょうど4つの「ワー」周期）で、エンベロープの整列とシームレスループ処理を施し、AAC形式でHTMLに埋め込まれています。再生速度は振り回す速度に応じて変化し、速く振るほど鳴き声は速く高くなります。

遊び方とインタラクション

ページを開いたら、以下のことができます：

手で振る：画面を押したまま円を描きます。本物の玩具を振るように。タッチ時にはアンカーが自動的に指先の上に上がり、手が小さな蝉を隠さないようにします。
自動で振る：ボタンをクリックするかスペースキーを押すと、玩具が自動的に回転します。
スマホを振る（モバイル、HTTPSまたはローカルファイルが必要）：スマホを握って円を描くと、重力方向が端末座標で回転し、直接振り棒を駆動します。iOSでは初回にモーションセンサーの許可が必要です。

技術的なハイライト

サウンド合成チェーン

録音サンプルのデコードに失敗した場合、プロジェクトには実際の玩具の発音原理を模倣した純粋な合成フォールバックが組み込まれています：

実際の玩具	合成実装
松脂の粘着摩擦によるパルス	ノコギリ波オシレーター、周波数は回転速度に応じて上昇（55〜195 Hz）、tanhソフトクリッピングで粗い倍音を追加
蝉の粒状感	24〜45 Hzの正弦波低周波AM + バンドパス摩擦ノイズのベース
竹膜 + 筒腔の共鳴	3つの並列バンドパス共振ピーク（1050 / 2150 / 3350 Hz）
回転による「ワー、ワー」	バンドパスフィルターの中心周波数が回転位相に応じてスイープ

物理シミュレーション

竹筒はロープでつながれた質点で、重力、引っ張るだけで押さない弾性ロープ、空気抵抗を受けます。音を出す条件は、ロープ方向の角速度が約1.1回転/秒を超え、かつロープが張っていることです。手を離すと慣性で余韻が徐々に消えます。

モバイルファースト

セーフエリアに適応し、ロープの長さは画面に応じてスケーリング。
タッチ時にアンカーが自動的に上に移動し、指の遮蔽を防ぎます。
マルチタッチは排他的で、誤操作を防ぎます。
オーディオは最初のタッチ/クリックで初期化され、指を離したときに再ロック解除されます（ユーザーアクティベーションルールに準拠）。
iOSの interrupted 状態と古いカーネルの roundRect にはフォールバックがあります。

パフォーマンス最適化

静的シーンはオフスクリーンレイヤーに事前合成され、8秒間静止するとオーディオスレッドを自動的に一時停止して省電力化します。

カウントとプライバシー

ページ下部には自分の「ワー数」が表示され、手で振った1回転ごとに1「ワー」がカウントされ、自動回転はカウントされません。データはブラウザのlocalStorageに保存され、アップロードもネットワーク接続もバックエンドもありません——ページが読み込まれた後は、それ以上のリクエストは一切送信されません。

以前はCloudflare Worker + Durable Objectを使ったサイト全体のリアルタイムカウントがありましたが、現在は完全に廃止され、バックエンドコードもリポジトリから削除されました。

ライセンスと声明

注意：このプロジェクトはオープンソースではありません。ソースコードは学習と交流のために公開されていますが、再配布や公開デプロイは誰にも許可されていません。公式サイトは https://zhuzhiliao.icu のみで、他のドメインでのデプロイはすべて未承認です。

許可されること：ソースコードの閲覧・研究、自分が所有または管理するデバイスでのローカル実行、学習や個人的な使用のための変更。

許可されないこと：再配布（修正版を含む）、第三者からアクセス可能な場所へのデプロイ、サービスの提供、商用利用、著作権表示の削除。

ローカルでの実行方法

# index.html を直接開くだけでOK、ビルド不要
# または静的サーバーを起動して、スマホを同じWi-Fiに接続してアクセス
python3 -m http.server 8123

まとめ

竹蝉は、伝統玩具と現代のWeb技術を巧みに組み合わせた事例です。単一ファイルで複雑な物理シミュレーションとオーディオ処理を実現し、極限の可搬性を維持する方法を示しています。Web Audioに興味がある方も、子供時代の記憶を思い出したい方も、https://zhuzhiliao.icu を開いて振ってみる価値があります。

もしそれがあなたの思い出を呼び起こしたり、「実際の録音サンプル + ロープでつながれた質点の物理」を単一ファイルに詰め込むこのアプローチが面白いと思ったら、GitHubでStarを付けてみてください。

ソース

imsai-sh/zhuzhiliao: 竹蝉 —— 回すとワーワー鳴く伝統玩具のWebシミュレーション版。ゼロ依存の単一ファイル、実際の録音サンプル、モバイルファースト。