React项目使用ID3.js读取音频标签出现乱码如何转换为正常内容

该问题是ID3标签存储编码与ID3.js默认解码编码不匹配导致的：国内绝大多数压制的MP3文件会使用GBK/GB2312编码存储歌手、标题、专辑等文本信息，而ID3.js默认采用UTF-8解码，就会出现如下乱码：

你可以按照以下步骤解决：

步骤1：安装编码转换依赖 #

使用iconv-lite完成不同编码到UTF-8的转码，执行安装命令：
npm install iconv-lite
如果需要适配不同来源的音频文件，可以额外安装编码检测库jschardet自动识别编码：
npm install jschardet

步骤2：调整ID3读取逻辑 #

替换原有直接调用id3.fromFile的代码，手动处理编码转码：

import iconv from 'iconv-lite';
import id3 from 'id3js';
import jschardet from 'jschardet';

const handleAudioUpload = async (file) => {
  // 读取文件为原始二进制Buffer
  const arrayBuffer = await file.arrayBuffer();
  const buffer = Buffer.from(arrayBuffer);

  // 按二进制格式读取ID3标签，避免默认UTF-8解码破坏原始编码
  const rawTags = await id3.fromBuffer(buffer, {
    encoding: 'binary'
  });

  // 自动检测原始文本编码
  const getTextEncoding = (rawStr) => {
    const detectResult = jschardet.detect(Buffer.from(rawStr, 'binary'));
    return detectResult.encoding || 'utf-8';
  };

  // 转码所有文本字段
  const normalTags = {
    ...rawTags,
    title: iconv.decode(Buffer.from(rawTags.title, 'binary'), getTextEncoding(rawTags.title)),
    artist: iconv.decode(Buffer.from(rawTags.artist, 'binary'), getTextEncoding(rawTags.artist)),
    album: iconv.decode(Buffer.from(rawTags.album, 'binary'), getTextEncoding(rawTags.album))
  };

  console.log(normalTags);
}

注意事项 #

• 如果你确认所有上传的音频文件都采用GBK编码，可以省略编码检测步骤，直接指定gbk作为解码编码即可，减少依赖体积。
• 浏览器环境下iconv-lite已经做了兼容，不需要额外配置。

内容的提问来源于stack exchange，提问作者Hodjaev Azamat