如何用expo-av在Expo中实现锁屏媒体控制（兼容新架构）

一、基于Expo AV的实现方案 #

Expo AV从SDK 48+开始完全支持React Native新架构，可通过以下步骤实现锁屏媒体控制：

1. 配置项目权限与后台音频 #

在app.json的expo字段中添加必要配置，确保后台音频和锁屏控制权限生效：

{
  "expo": {
    "ios": {
      "infoPlist": {
        "UIBackgroundModes": ["audio"],
        "NSAppleMusicUsageDescription": "用于在锁屏界面展示媒体控制组件"
      }
    },
    "android": {
      "permissions": ["POST_NOTIFICATIONS"]
    },
    "plugins": [
      [
        "expo-av",
        {
          "audioPermission": "允许应用访问音频以实现后台播放和锁屏控制"
        }
      ]
    ]
  }
}

2. 初始化音频会话 #

启用外部播放会话（核心配置，用于激活锁屏控制）：

import { Audio } from 'expo-av';

async function initAudioSession() {
  await Audio.setAudioModeAsync({
    allowsRecordingIOS: false,
    playsInSilentModeIOS: true,
    shouldDuckAndroid: false,
    usesExternalPlaybackSession: true, // 关键：开启锁屏控制支持
    staysActiveInBackground: true,
  });
}

// 在应用启动时调用
initAudioSession();

3. 更新锁屏曲目元数据 #

播放新曲目或播放状态变化时，调用setNowPlayingAsync同步元数据到锁屏：

async function updateLockScreen(track, isPlaying) {
  // track 示例：{ title: "夜曲", artist: "周杰伦", coverUri: "https://example.com/cover.jpg" }
  await Audio.setNowPlayingAsync({
    title: track.title,
    artist: track.artist,
    artworkUri: track.coverUri, // 支持HTTPS远程地址或本地文件URI
    isPlaying: isPlaying,
  });
}

// 示例：播放某首歌时调用
const currentTrack = { title: "夜曲", artist: "周杰伦", coverUri: "https://example.com/cover.jpg" };
updateLockScreen(currentTrack, true);

4. 监听锁屏控制指令 #

通过音频事件监听器响应锁屏的播放/暂停操作：

let playbackListener;
let interruptionListener;

function setupControlListeners(soundObject) {
  // 监听播放状态变化（同步锁屏状态）
  playbackListener = Audio.addAudioEventListener(
    'playbackStateDidChange',
    (status) => {
      if (status.isPlaying !== undefined) {
        updateLockScreen(currentTrack, status.isPlaying);
      }
    }
  );

  // 监听外部中断（如锁屏的播放/暂停指令）
  interruptionListener = Audio.addAudioEventListener(
    'interruption',
    (event) => {
      if (event.type === Audio.InterruptionType.Ended && event.shouldResume) {
        soundObject.playAsync();
      } else if (event.type === Audio.InterruptionType.Began) {
        soundObject.pauseAsync();
      }
    }
  );
}

// 组件卸载时清理监听器
useEffect(() => {
  setupControlListeners(yourSoundObject);
  return () => {
    playbackListener?.remove();
    interruptionListener?.remove();
  };
}, [yourSoundObject]);

二、兼容新架构的替代库 #

如果需要更复杂的媒体控制（如上一曲/下一曲、进度条），可考虑：

• expo-av + expo-notifications：结合自定义Android媒体通知（iOS端锁屏控制已由Expo AV原生处理）
• react-native-media-controller：已适配新架构的第三方库，提供更丰富的锁屏控制组件，需使用Expo预构建或EAS构建确保兼容性

内容的提问来源于stack exchange，提问作者Jitendera Kumar