如何使用React Native Expo获取音频文件元数据

1. 用expo-media-library原生提取基础信息 #

expo-media-library本身支持直接获取音频的专辑封面URI和基础元数据，无需额外第三方库：

• 先申请媒体权限，再获取音频资产并指定需要的字段：

import * as MediaLibrary from 'expo-media-library';

async function loadAudioAssets() {
  const { status } = await MediaLibrary.requestPermissionsAsync();
  if (status !== 'granted') return;

  const assetResult = await MediaLibrary.getAssetsAsync({
    mediaType: MediaLibrary.MediaType.audio,
    fields: ['id', 'filename', 'metadata', 'albumArtUri'],
  });

  assetResult.assets.forEach(asset => {
    // 基础元数据
    console.log('专辑名:', asset.metadata?.album);
    console.log('艺术家:', asset.metadata?.artist);
    // 专辑封面URI，可直接用于Image组件
    console.log('封面地址:', asset.albumArtUri);
  });
}

注意：部分老旧音频文件可能没有albumArtUri字段，需做兜底处理。

2. 第三方库编译失败的替代方案 #

如果依赖jsmediatags等库出现编译问题，改用纯JS实现的music-metadata-browser，结合expo-file-system读取文件解析：

1. 安装依赖：

npm install music-metadata-browser

2. 解析音频文件的完整元数据：

import * as MediaLibrary from 'expo-media-library';
import * as FileSystem from 'expo-file-system';
import { parseBuffer } from 'music-metadata-browser';

async function extractFullMetadata(asset: MediaLibrary.Asset) {
  const fileBase64 = await FileSystem.readAsStringAsync(asset.uri, {
    encoding: FileSystem.EncodingType.Base64,
  });
  const buffer = Buffer.from(fileBase64, 'base64');
  const metadata = await parseBuffer(buffer);

  // 完整元数据
  console.log('音频标题:', metadata.common.title);
  console.log('专辑:', metadata.common.album);
  // 处理专辑封面
  const cover = metadata.common.picture?.[0];
  if (cover) {
    const coverBase64 = `data:${cover.format};base64,${cover.data.toString('base64')}`;
    // 用于Image组件展示
    // <Image source={{ uri: coverBase64 }} style={{ width: 100, height: 100 }} />
  }
}

3. 第三方库编译问题排查 #

如果坚持使用其他第三方库，先排查以下要点：

• 确认库支持React Native/Expo环境，避免依赖Node.js核心模块（如fs、path）的库
• 运行npx expo install --fix自动修复依赖版本不匹配问题
• 检查tsconfig.json，确保moduleResolution为bundler或node，target设置为ESNext

内容的提问来源于stack exchange，提问作者Carlos Eduardo