iOS设备Web音频仅首次播放正常问题求助

问题根源 #

iOS Safari（包括iOS上所有WebView）有严格的音频播放政策：所有音频播放必须由用户真实交互事件触发，且音频上下文需要在首次用户交互时激活。同时audio.play()返回Promise，若未处理错误可能导致后续播放失败；原代码的事件绑定逻辑在iOS上也存在触发冲突问题。

具体修改方案 #

1. 优化HTML结构与音频预加载

给audio标签添加preload="auto"，确保音频预加载并建立初始上下文：

<audio id="audio" preload="auto">
    <source src="sounds/fart.mp3" type="audio/mpeg" />
    Your browser does not support the audio element.
</audio>
<button id="audio-btn" class="audio-btn">
    <img id="audio-icon" src="img/sound-off.webp" alt="audio_play/pause" />
</button>

<button id="fart-btn">Fart</button>

2. 重构JavaScript逻辑，修复事件与状态管理

const audio = document.getElementById('audio');
const audioIcon = document.getElementById('audio-icon');
const audioBtn = document.getElementById('audio-btn');
const fartBtn = document.getElementById('fart-btn');

let audioIconPlay = false;

// 音频开关逻辑：首次激活时建立iOS音频上下文
function toggleAudio() {
    audioIconPlay = !audioIconPlay;
    if (audioIconPlay) {
        audioIcon.src = 'img/sound-on.webp';
        // 首次激活时触发一次静音播放，建立iOS音频上下文
        audio.play().then(() => {
            audio.pause();
            audio.currentTime = 0;
        }).catch(err => console.error('激活音频上下文失败:', err));
    } else {
        audioIcon.src = 'img/sound-off.webp';
        audio.pause();
        audio.currentTime = 0;
    }
}

// 播放音频逻辑：按下播放，松开重置
function handleFartDown() {
    if (audioIconPlay) {
        audio.currentTime = 0; // 确保每次播放从开头开始
        audio.play().catch(err => console.error('播放失败:', err));
    }
}

function handleFartUp() {
    if (audioIconPlay) {
        audio.pause();
        audio.currentTime = 0;
    }
}

// 绑定事件：兼容桌面与移动端
audioBtn.addEventListener('click', toggleAudio);
fartBtn.addEventListener('mousedown', handleFartDown);
fartBtn.addEventListener('touchstart', handleFartDown);
fartBtn.addEventListener('mouseup', handleFartUp);
fartBtn.addEventListener('touchend', handleFartUp);

关键修改说明 #

• 激活音频上下文：用户第一次打开音频开关时，触发一次静音播放再暂停，让iOS系统认可该音频对象的用户交互权限，后续播放无需重复验证。
• 事件分离：将播放和重置逻辑拆分到touchstart/mousedown和touchend/mouseup，避免原逻辑中同一按钮事件重复触发导致的状态混乱。
• Promise错误处理：捕获audio.play()的错误，便于排查后续播放失败原因，同时避免未处理的Promise终止代码执行。
• 显式元素获取：避免依赖全局变量，通过getElementById显式获取DOM元素，提升代码稳定性。

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