使用jsmediatags读取音乐元数据后，如何编辑字段及自定义标签？

首先要明确：jsmediatags仅支持读取音乐元数据，没有内置的写入/编辑功能。你之前修改tag.tags里的属性只是修改了内存中的对象，并不会对原文件产生任何影响。要实现真正的元数据编辑，需要结合ID3（或对应格式的标签标准）处理工具，完成标签修改和文件重写。

核心实现思路 #

以MP3文件的ID3v2标签为例（多数主流音乐文件采用该标准），步骤如下：

• 读取原文件的完整二进制数据（ArrayBuffer），保留音频部分和原有标签结构
• 针对要修改的字段，按照ID3标准构造对应帧：
  • 歌词对应USLT帧（Unsynchronised Lyrics Text），需指定语言、描述、歌词文本
  • 自定义描述对应TXXX帧（User Defined Text Information Frame），需指定描述和内容
  • 艺术家、专辑等基础字段对应ID3的固定帧（如TPE1对应艺术家，TALB对应专辑）
• 将修改后的ID3标签与原音频数据拼接，生成新的文件Blob，供用户下载替换

TypeScript示例代码 #

下面以id3js库为例（需自行引入），实现标签修改和文件生成：

// 读取目标音乐文件
const handleEditTags = async (file: File) => {
  // 1. 将文件转为ArrayBuffer
  const arrayBuffer = await file.arrayBuffer();

  // 2. 修改ID3标签
  const updatedBuffer = await ID3.write(arrayBuffer, {
    // 修改歌词
    lyrics: [{
      language: 'eng', // 语言代码，如中文用'zho'
      description: '', // 歌词描述，可留空
      text: 'my lyrics updated ... !'
    }],
    // 修改自定义描述（TXXX帧）
    userDefined: [{
      description: '自定义字段名称',
      value: 'my another description...!'
    }],
    // 修改基础字段（示例）
    artist: '更新后的艺术家名称',
    album: '更新后的专辑名称'
  });

  // 3. 生成新文件并触发下载
  const newFile = new Blob([updatedBuffer], { type: file.type });
  const downloadLink = document.createElement('a');
  downloadLink.href = URL.createObjectURL(newFile);
  downloadLink.download = file.name;
  downloadLink.click();
  // 释放URL对象
  URL.revokeObjectURL(downloadLink.href);
};

注意事项 #

• 不同音乐格式标签标准不同：FLAC、OGG等用Vorbis Comment，需使用对应格式的处理工具
• 浏览器环境无权限直接修改本地文件，只能生成新文件让用户手动替换
• 处理时需确保标签结构符合标准，避免破坏音频数据导致文件无法播放

内容的提问来源于stack exchange，提问作者Rainy sidewalks