JavaScript Media Session API：暂停功能正常但播放按钮状态未切换及恢复播放失效问题修复咨询

我正在尝试使用Media Session API（即浏览器内置的播放控制功能），目前遇到如下问题：暂停按钮可成功暂停音频及进度条，但暂停按钮不会切换为播放按钮，导致无法通过该按钮恢复播放。已在Chrome浏览器中进行测试，请问该如何修复此问题？

相关代码示例 #

if ('mediaSession' in navigator) {
	let audioCtx, oscillator, gainNode;
	const button = document.getElementById('button');
	
	navigator.mediaSession.setActionHandler('play', () => {
		audioCtx.resume();
		navigator.mediaSession.playbackState = 'playing';
	});
	navigator.mediaSession.setActionHandler('pause', () => {
		audioCtx.suspend();
		navigator.mediaSession.playbackState = 'paused';
	});
	// 设置`duration`，使进度条可作为暂停状态的额外指示器
	if ('setPositionState' in navigator.mediaSession) {
		navigator.mediaSession.setPositionState({
			duration: 20,
			position: 0,
		});
	}
	button.onclick = async () => {
		if (!audioCtx) {
			audioCtx = new AudioContext();
			oscillator = audioCtx.createOscillator();
			gainNode = audioCtx.createGain();
			oscillator.connect(gainNode);
			gainNode.connect(audioCtx.destination);
			oscillator.frequency.value = 440;
			gainNode.gain.value = 0.1;
			oscillator.start();
			await audioCtx.resume();
			navigator.mediaSession.playbackState = 'playing';
		}
	};
}

<button id="button">Initialize</button>

Stack Snippets 警告 #

在撰写新回答时，代码在Stack Snippets模态对话框中似乎无法正常运行。点击“保存并插入到帖子中”或编辑现有帖子时可正常工作。
每个浏览器标签页仅存在一个媒体控件，在本SO页面运行多个代码片段可能会导致相互干扰。点击“隐藏结果”或暂停音频无法避免干扰，建议重新加载页面，但请注意保存未完成的文本。

类似但不完全相同的问题 #

• Mac系统中初始化及暂停功能均无法正常工作？
• Firefox不接受完全静音作为临时解决方案→相关议题→PR→代码差异讨论无结论→规范相关讨论
• Chrome中曾出现初始化及暂停功能均无法正常工作的情况
• Android通知无显示，信息未展示

嘿，我仔细看了你的代码，发现问题核心是状态同步不完整：你只处理了系统媒体控件的动作，但没同步页面按钮的状态，也没监听AudioContext的状态变化来实现双向同步。下面给你修复后的代码，我会标注关键改动：

if ('mediaSession' in navigator) {
	let audioCtx, oscillator, gainNode;
	const button = document.getElementById('button');
	
	// 系统播放按钮动作处理
	navigator.mediaSession.setActionHandler('play', () => {
		if (audioCtx && audioCtx.state === 'suspended') {
			audioCtx.resume();
		}
	});
	
	// 系统暂停按钮动作处理
	navigator.mediaSession.setActionHandler('pause', () => {
		if (audioCtx && audioCtx.state === 'running') {
			audioCtx.suspend();
		}
	});
	
	// 设置进度条状态
	if ('setPositionState' in navigator.mediaSession) {
		navigator.mediaSession.setPositionState({
			duration: 20,
			position: 0,
		});
	}
	
	// 统一同步所有控件状态的函数
	const syncStates = () => {
		if (!audioCtx) return;
		switch(audioCtx.state) {
			case 'running':
				navigator.mediaSession.playbackState = 'playing';
				button.textContent = 'Pause';
				break;
			case 'suspended':
				navigator.mediaSession.playbackState = 'paused';
				button.textContent = 'Play';
				break;
		}
	};
	
	// 页面按钮点击逻辑：初始化+播放/暂停切换
	button.onclick = async () => {
		if (!audioCtx) {
			// 初始化音频上下文
			audioCtx = new AudioContext();
			oscillator = audioCtx.createOscillator();
			gainNode = audioCtx.createGain();
			oscillator.connect(gainNode);
			gainNode.connect(audioCtx.destination);
			oscillator.frequency.value = 440;
			gainNode.gain.value = 0.1;
			oscillator.start();
			// 监听AudioContext状态变化，自动同步控件
			audioCtx.addEventListener('statechange', syncStates);
			await audioCtx.resume();
		} else {
			// 根据当前状态切换播放/暂停
			if (audioCtx.state === 'running') {
				audioCtx.suspend();
			} else if (audioCtx.state === 'suspended') {
				audioCtx.resume();
			}
		}
		// 手动同步一次状态
		syncStates();
	};
}

<button id="button">Initialize</button>

关键改动说明： #

1. 新增syncStates函数：统一处理AudioContext状态、系统媒体控件状态、页面按钮文字的同步，避免重复代码。
2. 监听statechange事件：不管是页面按钮触发还是系统控件触发状态变化，都能自动同步所有控件的状态。
3. 完善页面按钮逻辑：初始化完成后，按钮切换为“Pause/Play”，支持点击切换播放状态。
4. 系统控件动作优化：增加状态判断，避免无效调用，提升稳定性。

测试一下：点击Initialize按钮开始播放，系统媒体控件会显示暂停按钮；点击系统暂停按钮，音频暂停，按钮会变成“Play”，此时不管点击系统播放按钮还是页面按钮，都能正常恢复播放啦~

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