多HTML audio元素下，如何让iPhone锁屏媒体控件稳定显示？

问题原因分析 #

iOS的Media Session API对多音频实例的播放状态检测存在异步时机问题：

• 直接同步调用play()后立即设置playbackState，系统可能还未完成所有音频的播放初始化，无法正确关联媒体会话到锁屏控件。
• 多音频实例同时播放时，系统需要时间识别活跃的媒体会话，单次播放触发时可能未完成绑定，而多次播放/暂停操作会强制系统重新识别会话。

解决方案 #

通过异步等待音频播放完成、绑定媒体会话动作处理器、关联主音频实例的状态，确保系统稳定识别媒体会话。

具体修改点 #

1. 异步等待所有音频播放完成：使用Promise.all等待四个audio.play()的Promise完成后，再更新Media Session的playbackState，确保系统已检测到音频播放状态。
2. 添加Media Session动作处理器：明确设置play/pause等动作的处理器，让iOS系统确认控件的交互逻辑，提升控件显示的稳定性。
3. 关联主音频实例的状态：选择一个核心音频实例（如vocals），监听其play/pause事件，同步更新Media Session状态，确保状态同步的可靠性。

修改后的代码 #

class App extends Component<IAppProps, IAppState> {
    private vocals: HTMLAudioElement;
    private other: HTMLAudioElement;
    private bass: HTMLAudioElement;
    private drums: HTMLAudioElement;

    constructor(props: any) {
        super(props);

        this.vocals = new Audio();
        this.other = new Audio();
        this.bass = new Audio();
        this.drums = new Audio();

        this.state = {
            playbackState: 'paused',
        }
    }

    componentDidMount() {
        // 替换为实际音频地址
        this.vocals.src = 'your-vocals-url';
        this.other.src = 'your-other-url';
        this.bass.src = 'your-bass-url';
        this.drums.src = 'your-drums-url';

        // 预加载音频
        Promise.all([
            this.vocals.load(),
            this.other.load(),
            this.bass.load(),
            this.drums.load()
        ]).catch(err => console.error('音频加载失败:', err));

        if ('mediaSession' in navigator) {
            navigator.mediaSession.metadata = new MediaMetadata({
                title: 'Unforgettable',
                artist: 'Nat King Cole',
                album: 'The Ultimate Collection (Remastered)',
                artwork: [
                    { src: 'https://dummyimage.com/96x96', sizes: '96x96', type: 'image/png' },
                    { src: 'https://dummyimage.com/128x128', sizes: '128x128', type: 'image/png' },
                    { src: 'https://dummyimage.com/192x192', sizes: '192x192', type: 'image/png' },
                    { src: 'https://dummyimage.com/256x256', sizes: '256x256', type: 'image/png' },
                    { src: 'https://dummyimage.com/384x384', sizes: '384x384', type: 'image/png' },
                    { src: 'https://dummyimage.com/512x512', sizes: '512x512', type: 'image/png' },
                ]
            });

            // 设置媒体会话动作处理器
            navigator.mediaSession.setActionHandler('play', () => {
                this.handlePlayClick();
            });

            navigator.mediaSession.setActionHandler('pause', () => {
                this.handlePlayClick();
            });
        }

        // 监听主音频的播放/暂停事件，同步会话状态
        this.vocals.addEventListener('play', () => {
            if ('mediaSession' in navigator) {
                navigator.mediaSession.playbackState = 'playing';
            }
        });

        this.vocals.addEventListener('pause', () => {
            if ('mediaSession' in navigator) {
                navigator.mediaSession.playbackState = 'paused';
            }
        });
    }

    componentWillUnmount() {
        // 清理事件监听和音频资源
        this.vocals.removeEventListener('play', () => {});
        this.vocals.removeEventListener('pause', () => {});
        [this.vocals, this.other, this.bass, this.drums].forEach(audio => {
            audio.pause();
            audio.src = '';
        });
    }

    handlePlayClick = async () => {
        const { playbackState } = this.state;

        if (playbackState === 'paused') {
            try {
                // 等待所有音频播放完成
                await Promise.all([
                    this.vocals.play(),
                    this.other.play(),
                    this.bass.play(),
                    this.drums.play()
                ]);
                this.setState({ playbackState: 'playing' });
            } catch (err) {
                console.error('播放失败:', err);
                this.setState({ playbackState: 'paused' });
            }
        } else {
            [this.vocals, this.other, this.bass, this.drums].forEach(audio => audio.pause());
            this.setState({ playbackState: 'paused' });
        }
    }

    render() {
        return (
            <div className="App">
                <button onClick={this.handlePlayClick}>
                    {this.state.playbackState === 'paused' ? 'PLAY' : 'PAUSE'}
                </button>
            </div>
        );
    }
}

额外说明 #

• 确保音频URL有效且支持CORS（跨域场景），否则play()可能抛出错误导致状态不同步。
• iOS对媒体会话的识别依赖实际音频播放动作，异步等待播放完成是核心，避免系统未检测到活跃音频就设置会话状态。
• 绑定主音频事件可确保即使其他音频状态异常，会话状态仍能保持同步。

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