iOS Safari下AudioContext.createMediaElementSource致React音频播放异常

嘿，这个问题我之前也踩过坑，核心是浏览器对WebAudio Context的安全限制和代码时序问题在搞鬼，具体来说有两个关键点：

1. AudioContext的用户交互强制要求
   现代浏览器为了防止网页自动播放噪音，规定AudioContext必须在**用户主动交互（比如点击、触摸）**中被创建或者恢复。你现在在componentDidMount里直接初始化了AudioContext，这时候用户还没做任何操作，浏览器会把这个上下文标记为「挂起」状态。虽然你点击播放时短暂激活了它，但如果没有持续的音频活动，浏览器很快就会让它再次休眠，导致音频突然静默。

2. loadeddata事件的时序冲突
   第一次点击播放时，音频可能还没加载完成，loadeddata事件还没触发——这时候音频走的是默认的输出路径，能正常播放；但等loadeddata触发后，你创建了audioSource并把它连到AudioContext，这时候音频的输出被切换到了已经休眠的上下文里，自然就没声音了，而媒体元素本身的播放状态还是正常的，所以currentTime还在走。

修复后的代码 #

我调整了逻辑，把AudioContext的初始化/恢复放到用户点击事件里，同时保证连接逻辑在播放前完成：

import React, { Component } from 'react';
import MdPlayArrow from 'react-icons/lib/md/play-arrow';
const AudioContext = window.AudioContext || window.webkitAudioContext;

class Player extends Component {
  constructor(props) {
    super(props);
    this.audioContext = null;
    this.audioSource = null;
  }

  async handleOnPlayClick() {
    // 确保AudioContext在用户交互中激活/恢复
    if (!this.audioContext) {
      this.audioContext = new AudioContext();
    } else if (this.audioContext.state === 'suspended') {
      await this.audioContext.resume();
    }

    // 确保audioSource已创建并连接到目的地
    if (!this.audioSource && this.audioRef) {
      this.audioSource = this.audioContext.createMediaElementSource(this.audioRef);
      this.audioSource.connect(this.audioContext.destination);
    }

    await this.audioRef.play();
  }

  render() {
    return (
      <div onClick={this.handleOnPlayClick.bind(this)}>
        <audio src={this.props.src} ref={ref => { this.audioRef = ref }} />
        <MdPlayArrow />
      </div>
    );
  }
}

export default Player;

关键调整说明 #

• 把AudioContext的初始化移到点击事件里：这样能确保它是在用户主动交互中被创建的，浏览器不会直接挂起它。
• 检查并恢复挂起的上下文：如果用户之前播放过，后来浏览器休眠了上下文，点击时要调用resume()恢复。
• 移除loadeddata监听：改为在点击时检查audioSource是否存在，保证音频输出路径在播放前已经正确连接到WebAudio上下文。
• 用async/await处理异步操作：play()和resume()都是异步方法，用await保证时序正确，避免竞态问题。

这样调整后，音频就能通过WebAudio Context正常播放，不会再出现一秒后静默的情况啦。

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