📖 Overview
วิเคราะห์ความน่าสนใจวิดีโอ
🛠️ Tech Stack
CanvasWeb Audio
🏷️ Tags
- video
- heatmap
v1.0
SJ88Cute Engagement Heatmap - Audio + Motion Analysis
released 2026-07-08🗣️ User Command
ทำ Engagement Heatmap Visualizer
🤖 AI Response
Built single-file HTML heatmap analyzer · upload video MP4/MOV/WebM → split into 20-120 buckets · analyze each bucket via Motion detection (canvas pixel diff) + audio energy · render HSL gradient heatmap (blue→yellow→red) · peak detection algorithm (top zones above threshold) · SRT/VTT export for highlights · JSON export for full data · sample demo with synthesized peaks
✅ What Changed
- ["\ud83d\udcca Engagement Heatmap v1.0", "\ud83d\udcf9 Upload MP4/MOV/WebM (drag-drop)", "\ud83d\udcca 20-120 buckets per video (default 60)", "\ud83c\udfa8 HSL color: \ud83d\udd35 blue (cold) \u2192 \ud83d\udfe1 yellow (mid) \u2192 \ud83d\udd34 red (hot)", "\ud83c\udfac Motion detection via canvas pixel diff", "\ud83d\udd0a Audio energy analysis (synthesized for sample)", "\ud83d\udd25 Peak detection with adjustable threshold", "\u23f1\ufe0f Timeline view (energy vs motion lines)", "\ud83d\udccb Bucket grid with timestamp + %", "\ud83d\udcbe Export: SRT subtitles \u00b7 JSON data \u00b7 Copy peaks", "\ud83c\udfb5 Sample generators with peaks", "\ud83c\udfa8 Kawaii pink theme"]
