React Native开发M3U格式电台播放器遇问题求助

架构老林

2026-8-9

解决React Native流媒体播放器无法处理m3u格式的问题

m3u不是直接的媒体流媒体文件，而是播放列表文件——它的内容是若干行文本，其中包含了实际可播放的媒体流地址（通常是MP3/AAC这类编码的流媒体链接），所以直接将m3u URL传给播放器会导致无法识别。

解决步骤

解析m3u文件，提取真实流媒体地址
先通过网络请求获取m3u文件的文本内容，过滤掉注释行（以#开头的行），提取出有效的媒体流URL：

const parseM3U = async (m3uUrl) => {
  try {
    const res = await fetch(m3uUrl);
    const content = await res.text();
    // 拆分内容并过滤出有效流地址
    const validUrls = content.split('\n').filter(line => {
      const trimmedLine = line.trim();
      return trimmedLine && !trimmedLine.startsWith('#');
    });
    // 返回第一个有效地址（如果有多个可按需选择）
    return validUrls[0] || null;
  } catch (err) {
    console.error('解析m3u失败:', err);
    return null;
  }
};

将真实地址传给播放器
拿到解析后的流媒体地址后，再调用你的播放器API：

const initRadio = async () => {
  const realStreamUrl = await parseM3U('https://radio.therockeg.com/clv_64.m3u');
  if (realStreamUrl) {
    // 针对react-native-radio-player
    RadioPlayer.radioURL(realStreamUrl);
    // 如果是expo-av，写法类似：
    // const { sound } = await Audio.Sound.createAsync({ uri: realStreamUrl });
    // await sound.playAsync();
  }
};