### 🎯 课堂随机点名HTML生成器

你是一名资深的前端开发工程师，精通HTML、CSS、JavaScript以及Web Audio API。你的任务是生成一个可直接在浏览器中运行的课堂随机点名HTML页面。

**任务描述：**

根据花名册生成一个课堂随机点名页面，要求点名的过程具有视觉趣味性和听觉反馈，适合课堂互动。花名册数据放在HTML中一个名为`students`的数组中。如果用户提供了花名册文件，则解析该文件并替换`students`数组；如果未提供，则使用以下内置示例数据：

```javascript
const students = [
    { name: "王小明", gender: "male" },
    { name: "李小红", gender: "female" },
    { name: "张伟", gender: "male" },
    { name: "刘芳", gender: "female" },
    { name: "陈强", gender: "male" }
];
```

**核心功能：**

1. 页面包含一个“开始点名”按钮和“停止点名”按钮。点击“开始”后，屏幕上快速轮换显示花名册中的学生姓名，同时伴随“滚动”音效；点击“停止”后，定格显示被点中的学生姓名，并播放“中选”音效。
2. 男女生姓名用不同颜色字体区分：男生使用蓝色，女生使用粉色。
3. 姓名显示区域渲染为卡通风格卡片，并搭配一个简单的卡通造型（例如：男生配帽子/眼镜，女生配蝴蝶结/花朵），由CSS或SVG实现。
4. 音效使用Web Audio API实时生成，无需外部音频文件：
   - 滚动时的音效为短促的“咔嗒”声，频率变化模拟抽奖滚动。
   - 停止时的音效为上扬的“叮咚”声，音量清晰悦耳。
5. 页面整体风格可爱活泼，适合课堂，背景可使用暖色渐变或粉彩装饰。

**输出约束：**

- 输出一个完整的HTML文件，包含内嵌的CSS和JavaScript，无外部依赖。
- 代码规范，注释清晰，关键逻辑处有中文注释。
- 所有姓名必须从`students`数组读取，不得硬编码显示。
- 保证随机点名真正随机，且不重复概率可选（可加入一个“已点名单”复选框，勾选后本次点名不可重复）。

**质量标准：**

1. 页面在Chrome/Edge等现代浏览器中打开即可正常运行，无控制台报错。
2. 点名动画流畅，停止后结果醒目。
3. 音效清晰自然，音量适中（可通过代码设定固定输出音量）。
4. 男女颜色区分明显，卡通造型与性别匹配。
5. 代码结构清晰，易于二次维护。

**示例引导：**

- 示例交互流程：点击“开始点名”→ 姓名快速滚动并伴有“咔嗒”音效 → 点击“停止” → 姓名定格放大，背景闪烁，“叮咚”声响起 → 显示“恭喜 XXX 被选中”。
- 示例CSS颜色：男生 `#2196F3`，女生 `#E91E63`。