如何通过Expo Media Library获取音频文件及封面图？

问题原因 #

Expo Media Library仅能获取音频文件的系统级元数据（如文件名、存储路径），不会解析MP3文件内嵌的ID3标签信息——而音频封面正是存储在这些标签里的，因此无法直接通过Media Library拿到封面图。

解决方案一：使用Expo生态工具解析音频元数据 #

可以结合expo-file-system和expo-music-info读取并解析MP3文件的内嵌元数据，提取封面图。

步骤： #

1. 安装依赖

expo install expo-file-system expo-music-info

2. 修改代码添加元数据解析逻辑
   在获取音频列表后，遍历每个文件解析元数据，补充封面信息：

import * as MediaLibrary from "expo-media-library";
import * as FileSystem from "expo-file-system";
import * as MusicInfo from "expo-music-info";
// 保留原有其他导入

function AudioProvider(props) {
  const [audioFiles, setAudioFiles] = useState([]);

  // 保留原有permissionAlert、getPermission函数不变

  const getAudioFiles = async () => {
    const mediaCountFunc = await MediaLibrary.getAssetsAsync({
      mediaType: "audio",
      mediaSubtypes: ["mp3"],
    });
    const totalCountvar = mediaCountFunc.totalCount;
    const media = await MediaLibrary.getAssetsAsync({
      mediaType: "audio",
      first: totalCountvar,
      mediaSubtypes: ["mp3"],
    });

    // 批量解析音频元数据
    const audioWithCovers = await Promise.all(
      media.assets.map(async (asset) => {
        try {
          const fileUri = asset.uri;
          const info = await MusicInfo.getMusicInfoAsync(fileUri, {
            includeArtwork: true,
            artworkFormat: "png",
          });

          return {
            ...asset,
            coverUri: info.artwork ? info.artwork.uri : null,
            title: info.title || asset.filename,
            artist: info.artist || "未知艺术家",
          };
        } catch (error) {
          console.warn(`解析音频失败：${asset.filename}`, error);
          return {
            ...asset,
            coverUri: null,
            title: asset.filename,
            artist: "未知艺术家",
          };
        }
      })
    );

    setAudioFiles(audioWithCovers);
  };

  // 修改渲染逻辑，显示封面和音频信息
  return (
    <ScrollView style={{ flex: 1, width: "100%" }}>
      {audioFiles.length == 0 ? (
        <Image source={require("../assets/loader.gif")} />
      ) : (
        audioFiles.map((item, key) => {
          if (!item.filename.includes(".mp3")) return null;
          return (
            <View key={key} style={{ flexDirection: "row", padding: 10, alignItems: "center" }}>
              {/* 封面显示 */}
              {item.coverUri ? (
                <Image
                  source={{ uri: item.coverUri }}
                  style={{ width: 60, height: 60, borderRadius: 8 }}
                />
              ) : (
                <View style={{ width: 60, height: 60, borderRadius: 8, backgroundColor: "#333", alignItems: "center", justifyContent: "center" }}>
                  <Text style={{ color: "#fff" }}>无封面</Text>
                </View>
              )}
              <View style={{ marginLeft: 10 }}>
                <Text style={{ color: "#fff", fontSize: 16 }}>{item.title}</Text>
                <Text style={{ color: "#aaa", fontSize: 12 }}>{item.artist}</Text>
              </View>
            </View>
          );
        })
      )}
    </ScrollView>
  );
}

export default AudioProvider;

解决方案二：使用第三方原生库 #

如果expo-music-info存在兼容性问题，可以尝试react-native-id3，但该库需要使用Expo Dev Client（无法在Expo Go中直接运行）：

1. 安装依赖

npm install react-native-id3

2. 按照Expo官方文档构建自定义开发客户端，之后即可用该库解析ID3标签中的封面数据。

注意事项 #

• 权限：确保已申请MEDIA_LIBRARY权限，文件解析依赖该权限访问媒体库文件。
• 性能：批量解析元数据可能耗时较长，建议添加加载提示或分页加载音频文件。
• 格式适配：部分音频封面为JPEG格式，可调整artworkFormat参数适配。

内容的提问来源于stack exchange，提问作者Henry Stark