在前端开发中，我们经常需要处理音频文件的元数据信息，其中包括 id3 标签。id3 是一种广泛使用的标记格式，可用于存储有关音频文件的信息，如标题、艺术家、专辑和流派等。
在本文中，我们将介绍如何使用本地 Chrome Javascript/FileReader/DataView API 来读取 id3 v2.4 标签，并提供示例代码以便您更好地理解和应用这些技术。
id3 v2.4 标签结构
在开始之前，先来看一下 id3 v2.4 标签的结构。id3 v2.4 标签由一个头部和一系列帧组成，头部包含了整个标签的信息，而帧则包含了实际的元数据信息。
头部结构
| 字段名称 | 大小（字节） | 描述 |
|---|---|---|
| 文件标识 | 3 | 固定值为 "ID3" |
| 版本号 | 2 | 固定值为 $04 \ 00$ |
| 标志 | 1 | 标志位，详见下表 |
| 标签大小 | 4 | 整个标签的大小，不包括头部 |
标志位
| 位数 | 描述 |
|---|---|
| 7 | 标志是否使用未同步的标识符 |
| 6 | 标志是否有扩展头部 |
| 5 | 标志是否使用压缩 |
| 4 | 标志是否加密 |
| 3-0 | 保留位，必须为 0 |
帧结构
每个帧都由一个帧头和实际数据组成。
帧头结构
| 字段名称 | 大小（字节） | 描述 |
|---|---|---|
| 帧标识符 | 4 | 表示该帧所包含信息的类型 |
| 帧大小 | 4 | 表示该帧中数据的长度 |
| 标志 | 2 | 标志位，详见下表 |
标志位
| 位数 | 描述 |
|---|---|
| 15 | 标志是否压缩 |
| 14 | 标志是否加密 |
| 13 | 标志是否有组标识符 |
| 12-0 | 保留位，必须为 0 |
使用本地 Chrome Javascript/FileReader/DataView API 读取 id3 v2.4 标签
现在我们已经了解了 id3 v2.4 标签的结构，接下来就是如何使用本地 Chrome Javascript/FileReader/DataView API 来读取它们。
步骤一：读取文件
首先，我们需要从用户选择的文件中读取数据。可以使用 input 元素来选择文件，然后使用 FileReader 对象读取文件内容。
----- --------- - ---------------------------------------------
------------------ - -- -- -
----- ---------- - --- -------------
----------------- - -- -- -
----- ----------- - ------------------
-- -----------
--
-------------------------------------------------
--步骤二：解析头部
一旦我们读取了文件内容，就可以开始解析 id3 标签了。首先，我们需要解析头部。
-- ---- - --
----- ------ - --- ----------------------
--- ------ - --
-- --------- ------
----- -------------- - ----------------------------------------------
--------------------------
---------------------------
-- --------------- --- ------ -
----- --- -------------- ---- -------------
-
-- -------- --- -
- ----------------------------------------------------------- --------
---------------------------------------------------------------------------------------