角色:

你是一位精通Web Audio API和前端设计的专家级Web开发者。

任务:

请帮我创建一个网页版的吉他调音器。整个应用需要在一个单一的index.html文件中实现，包含所有的HTML结构、CSS样式和JavaScript逻辑。

详细需求如下:

1. 文件结构:

所有代码（HTML, CSS, JavaScript）必须全部写在同一个index.html文件中。

CSS请使用<style>标签，JavaScript请使用<script>标签。

2. 核心功能 - 音频处理:

麦克风输入: 使用Web Audio API (navigator.mediaDevices.getUserMedia) 来获取用户的麦克风音频流。

音高检测库: 为了进行实时音高检测，请使用**ml5.js**库的pitchDetection模型。这是一个优秀且易于集成的库。请通过以下CDN链接在HTML中引入它：

code

Html

<script src="https://unpkg.com/ml5@0.12.2/dist/ml5.min.js"></script>

用户授权: 页面上需要有一个明确的 "开始调音" 按钮。只有当用户点击此按钮后，才向用户请求麦克风权限并启动音频分析。这对于用户体验和浏览器策略至关重要。

3. 用户界面 (UI) - 复古拟物风格:

整体布局: 设计一个类似真实物理调音器的界面。主体是一个深色或木纹质感的背景面板。

弧形表盘 (Tuning Meter):

界面的核心是一个半圆形的弧形表盘。

表盘正中央是 "0" 刻度，代表音准。左侧是负数刻度（例如 -50），右侧是正数刻度（例如 +50），代表音分的偏差。

颜色区域: 在表盘的背景上用颜色标示区域：中央的一小块区域是绿色（表示音准，例如 ±5 音分），两侧是黄色或橙色，最外侧是红色（表示偏差很大）。

指针 (Needle):

一根指针，其旋转中心在弧形表盘的圆心。

当音准时，指针垂直指向 "0" 刻度。

当音高偏低时，指针向左偏转；偏高时，向右偏转。偏转的角度应与音分的偏差值成正比。

信息显示区:

音名显示: 在表盘上方或下方，需要有一个显眼的区域，用来显示当前检测到的最接近的标准音名（例如 E, A, D, G, B）。如果检测不到清晰的音高，可以显示 --。

频率显示: 一个小一点的区域，实时显示检测到的频率值，单位为赫兹 (Hz)。例如 441.5 Hz。

状态提示: 一个文字区域，根据音准情况显示提示信息，例如 "太低了", "完美!", "太高了"。

4. JavaScript 逻辑:

标准音高: 在代码中定义一个对象或数组，存储标准吉他调音中每根弦的音名和对应的标准频率 (E2: 82.41Hz, A2: 110.00Hz, D3: 146.83Hz, G3: 196.00Hz, B3: 246.94Hz, E4: 329.63Hz)。

音高匹配:

当ml5.js检测到一个频率后，你的代码需要计算出这个频率最接近上面列表中的哪一个标准音。

同时，计算出检测频率与目标标准频率之间的音分(cents)差异。

提示：计算音分的公式是 1200 * log2(检测频率 / 目标频率)。

UI 更新:

根据计算出的音分差异，实时更新指针的旋转角度。

根据音分差异，更新状态提示的文字。

实时更新显示的音名和频率。

代码注释: 请在代码的关键部分，尤其是音频处理和音分计算逻辑处，添加清晰的注释，方便我理解和学习。

请确保最终的成品在视觉上具有复古的美感，并且功能稳定可靠。