Rorkのアプリで音をバックグラウンド再生し、ロック画面から操作できるようにする

// audioSession.ts — アプリ起動時に一度だけ呼ぶ
import { setAudioModeAsync } from 'expo-audio';
 
export async function configureAudioSession() {
  await setAudioModeAsync({
    // マナーモード（消音スイッチ）でも鳴らす。ヒーリング・音楽用途では必須
    playsInSilentMode: true,
    // 背景・ロック画面でも再生を継続する
    shouldPlayInBackground: true,
    // 他アプリの音と混ぜない。これがないとロック画面操作がプレイヤーに紐づかない
    interruptionMode: 'doNotMix',
    // Android: 他アプリが鳴り出したら一時停止し、戻ったら再開する余地を残す
    interruptionModeAndroid: 'doNotMix',
  });
}

// SoundScreen.tsx
import { useEffect } from 'react';
import { View, Text, Pressable } from 'react-native';
import { useAudioPlayer, useAudioPlayerStatus } from 'expo-audio';
import { configureAudioSession } from './audioSession';
 
const SOURCE = require('../assets/audio/rain-loop.mp3');
 
export default function SoundScreen() {
  const player = useAudioPlayer(SOURCE);
  const status = useAudioPlayerStatus(player);
 
  useEffect(() => {
    configureAudioSession();
    // ループ再生（環境音・ヒーリング用途で多い）
    player.loop = true;
  }, [player]);
 
  const toggle = () => {
    if (status.playing) {
      player.pause();
    } else {
      player.play();
    }
  };
 
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>{status.isLoaded ? '準備完了' : '読み込み中…'}</Text>
      <Pressable onPress={toggle}>
        <Text>{status.playing ? '一時停止' : '再生'}</Text>
      </Pressable>
    </View>
  );
}

import { useAudioPlayer, useAudioPlayerStatus } from 'expo-audio';
 
async function startWithLockScreen(player) {
  player.play();
 
  // ⚠️ 再生開始の直後に少し遅らせて呼ぶ。
  // 再生前に呼ぶと、まだセッションがアクティブでないため
  // ロック画面コントロールが表示されないことがある
  setTimeout(() => {
    player.setActiveForLockScreen(true, {
      title: '雨音 - 8時間ループ',
      artist: 'Relaxing Healing',
      albumTitle: '睡眠サウンド',
      artworkUrl: 'https://example.com/artwork/rain.jpg',
      // シーク（早送り・巻き戻し）を出すか。環境音ループでは false が自然
      showSeekForward: false,
      showSeekBackward: false,
    });
  }, 250);
}

import { useEffect, useRef } from 'react';
import { AppState } from 'react-native';
 
function useResumeAfterInterruption(player, status) {
  // ユーザーが意図的に止めたかどうかを記録するフラグ
  const shouldAutoResume = useRef(true);
 
  useEffect(() => {
    const sub = AppState.addEventListener('change', (next) => {
      // フォアグラウンド復帰時、ユーザーが止めていないなら再開
      if (next === 'active' && !status.playing && shouldAutoResume.current) {
        player.play();
      }
    });
    return () => sub.remove();
  }, [player, status.playing]);
 
  return shouldAutoResume;
}