iOS13是否导致连接AudioContext的<audio>标签功能失效？

这个问题是iOS13发布后WebKit对媒体元素与AudioContext的交互逻辑做了严格限制导致的——在iOS12及更早版本，你可以在页面加载时就把未经过用户交互激活的

问题出在哪？ #

你的代码在页面加载阶段就执行了createMediaElementSource(player)并连接到AudioContext，此时

修复后的代码 #

把媒体源的创建和连接操作移到第一次用户点击的回调里，同时用异步处理保证状态切换的顺序：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<body>
<div>
<h1>Play Audio Tag connected to audio context</h1>
<div id="playbutton" style="width:100px; height:100px; background:blue; color:white; margin:auto; text-align: center; font-size: 30px; cursor: pointer;">
Play
</div>
<audio id="myPlayer" crossorigin="anonymous" >
<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/858/outfoxing.mp3"/>
</audio>
</div>
<script>
const player = document.getElementById('myPlayer');
const playbutton = document.getElementById('playbutton');
let playStatus = 'paused';
const audioContext = new(window.AudioContext || window.webkitAudioContext)();
let audioSource = null; // 先声明变量，不立即创建源

playbutton.addEventListener('click', async function(ev) {
  if (playStatus === 'paused') {
    // 第一次点击时才创建并连接媒体源，确保在用户交互上下文内
    if (!audioSource) {
      audioSource = audioContext.createMediaElementSource(player);
      audioSource.connect(audioContext.destination);
    }
    
    // 恢复AudioContext（如果处于暂停状态）
    if (audioContext.state === 'suspended') {
      await audioContext.resume();
    }
    
    // 播放音频，用await保证操作顺序
    await player.play();
    
    playbutton.textContent = "Pause";
    playStatus = 'isPlaying';
  } else {
    player.pause();
    playbutton.textContent = "Play";
    playStatus = 'paused';
  }
});
</script>
</body>

关键修改说明 #

• 延迟媒体源创建：把createMediaElementSource移到用户点击事件里，确保这个操作在用户交互的上下文内执行，符合iOS13+的安全规则
• 异步状态处理：用async/await处理audioContext.resume()和player.play()，避免因为异步操作导致的状态混乱
• 状态判断优化：只在AudioContext处于suspended状态时才调用resume，避免不必要的操作

这个修改不仅能解决iOS13+的问题，还能保持在桌面端、Android和iOS12及以下版本的兼容性，完全符合你的需求。

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