React Native音频播放器监听蓝牙音频指令（iOS/Android）实现方案咨询

iOS 实现方案 #

推荐：使用react-native-track-player第三方库 #

该库已封装好蓝牙控制事件的监听逻辑，无需手动处理原生细节：

1. 安装并初始化播放器：

import TrackPlayer from 'react-native-track-player';

// 初始化播放器
await TrackPlayer.setupPlayer();

2. 监听蓝牙控制指令：

// 播放
TrackPlayer.addEventListener('remote-play', () => TrackPlayer.play());
// 暂停
TrackPlayer.addEventListener('remote-pause', () => TrackPlayer.pause());
// 停止
TrackPlayer.addEventListener('remote-stop', () => TrackPlayer.stop());
// 下一曲
TrackPlayer.addEventListener('remote-next', () => TrackPlayer.skipToNext());
// 上一曲
TrackPlayer.addEventListener('remote-previous', () => TrackPlayer.skipToPrevious());

3. 关键配置：在Xcode项目的Signing & Capabilities中，开启Background Modes并勾选Audio, AirPlay, and Picture in Picture，确保后台能接收指令。

自定义原生实现 #

若不想依赖第三方库，需编写iOS原生代码：

1. 在AppDelegate.m中导入AVFoundation并激活音频会话：

#import <AVFoundation/AVFoundation.h>

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    // 配置音频会话为播放模式
    AVAudioSession *session = [AVAudioSession sharedInstance];
    NSError *error = nil;
    [session setCategory:AVAudioSessionCategoryPlayback error:&error];
    [session activateWithOptions:AVAudioSessionActivateOptionNotifyOthersOnDeactivation error:&error];
    
    // 开启远程控制事件接收
    [[UIApplication sharedApplication] beginReceivingRemoteControlEvents];
    return YES;
}

2. 实现远程控制事件回调，并向React Native发送事件：

- (void)remoteControlReceivedWithEvent:(UIEvent *)event {
    if (event.type == UIEventTypeRemoteControl) {
        NSString *eventName = nil;
        switch (event.subtype) {
            case UIEventSubtypeRemoteControlPlay:
                eventName = @"RemoteControlPlay";
                break;
            case UIEventSubtypeRemoteControlPause:
                eventName = @"RemoteControlPause";
                break;
            case UIEventSubtypeRemoteControlStop:
                eventName = @"RemoteControlStop";
                break;
            case UIEventSubtypeRemoteControlNextTrack:
                eventName = @"RemoteControlNext";
                break;
            case UIEventSubtypeRemoteControlPreviousTrack:
                eventName = @"RemoteControlPrevious";
                break;
            default:
                return;
        }
        // 通过NativeEventEmitter发送事件给RN侧
        [self sendEventWithName:eventName body:nil];
    }
}

3. 在React Native侧通过NativeEventEmitter监听事件：

import { NativeEventEmitter, NativeModules } from 'react-native';

const { YourCustomModule } = NativeModules;
const emitter = new NativeEventEmitter(YourCustomModule);

emitter.addListener('RemoteControlPlay', () => {
    // 执行你的播放逻辑
});
// 其他事件同理添加监听

Android 实现方案 #

推荐：使用react-native-track-player第三方库 #

库已封装Android的MediaSessionCompat逻辑，自动处理蓝牙媒体按钮事件：

1. 安装初始化后，监听方式与iOS一致：

import TrackPlayer from 'react-native-track-player';

await TrackPlayer.setupPlayer();
TrackPlayer.addEventListener('remote-play', () => TrackPlayer.play());
TrackPlayer.addEventListener('remote-pause', () => TrackPlayer.pause());
TrackPlayer.addEventListener('remote-stop', () => TrackPlayer.stop());
TrackPlayer.addEventListener('remote-next', () => TrackPlayer.skipToNext());
TrackPlayer.addEventListener('remote-previous', () => TrackPlayer.skipToPrevious());

2. 关键配置：库会自动在AndroidManifest.xml中添加媒体服务声明，若手动配置需添加：

<service android:name="com.doublesymmetry.trackplayer.service.MusicService" />
<service android:name="com.doublesymmetry.trackplayer.service.MusicNotificationService" />

自定义原生实现 #

需通过MediaSessionCompat处理媒体按钮广播：

1. 创建广播接收器处理媒体按钮事件：

public class MediaButtonReceiver extends BroadcastReceiver {
    @Override
    public void onReceive(Context context, Intent intent) {
        MediaSessionCompat mediaSession = new MediaSessionCompat(context, "AudioPlayerSession");
        mediaSession.setCallback(new MediaSessionCompat.Callback() {
            @Override
            public void onPlay() {
                sendEventToRN("RemoteControlPlay");
            }

            @Override
            public void onPause() {
                sendEventToRN("RemoteControlPause");
            }

            @Override
            public void onStop() {
                sendEventToRN("RemoteControlStop");
            }

            @Override
            public void onSkipToNext() {
                sendEventToRN("RemoteControlNext");
            }

            @Override
            public void onSkipToPrevious() {
                sendEventToRN("RemoteControlPrevious");
            }
        });
        MediaButtonReceiver.handleIntent(mediaSession, intent);
    }

    private void sendEventToRN(String eventName) {
        // 结合你的原生模块，通过EventEmitter向RN发送事件
    }
}

2. 在AndroidManifest.xml中注册接收器：

<receiver android:name=".MediaButtonReceiver">
    <intent-filter>
        <action android:name="android.intent.action.MEDIA_BUTTON" />
    </intent-filter>
</receiver>

3. 在Activity或Service中激活MediaSession，确保应用获取媒体控制权：

MediaSessionCompat mediaSession = new MediaSessionCompat(this, "AudioPlayerSession");
mediaSession.setActive(true);

4. React Native侧通过NativeEventEmitter监听事件，与iOS逻辑一致。

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