天津五大道语音导览 H5产品系统Vibe Coding

1、立项原因：天津五大道景区面积大、历史建筑密集，游客缺乏便捷的自助导览工具。传统导游机租赁成本高、更新慢。本项目旨在用 H5 技术提供免费、即开即用的语音导览方案，降低游客获取景点讲解的门槛。
2、行业场景：智慧文旅、景区自助导览。适用于历史文化街区、名人故居集群、开放式景区等需要低成本部署语音讲解的场景。游客扫码即可进入，无需下载 APP，适合景区公众号或小程序内嵌使用。

1、功能模块：
• 景点轮播首页：图文展示核心景点，点击进入详情
• 交互式地图：基于 Leaflet 加载景区地图，标记各景点位置，支持 GPS 定位
• 语音播放器：支持播放/暂停、进度拖拽、语速切换（1x / 1.25x / 1.5x）
• 景点详情页：展示单景点的大图与历史介绍文案
2、主要功能描述：
为天津五大道景区提供移动端自助语音导览服务。用户进入页面后可通过轮播浏览景点概况，在地图上查看与自身的相对位置，点击目标景点收听语音讲解。语音播放器支持倍速切换和进度控制。目前覆盖张学良故居、庆王府、民园广场、顾维钧故居、张自忠故居五处核心景点，后续可通过 JSON 配置文件扩展新景点。

1、我负责的任务：
独立完成全部前端开发工作，包括页面 UI 设计、CSS 样式编写、Leaflet 地图接入、音频播放器控制逻辑、JSON 数据驱动景点配置。
2、技术栈与亮点：
技术栈：HTML5 / CSS3 / JavaScript / Leaflet.js，纯前端静态部署，无需服务器。亮点：采用中国风古铜/宣纸色系设计，适配移动端全屏体验；通过 JSON 配置文件驱动所有景点数据，新增景点无需改代码；音频播放器支持倍速切换与触控拖拽进度条，手感流畅。难点在于在不使用前端框架的前提下实现多页面状态切换、播放器与地图的联动交互。