为什么AudioContext.createMediaElementSource似乎打破了iOS Safari上的播放？

Question

我正在创建一个React应用程序，我想使用WebAudio API。我有一个像这样的组件：

import React, { Component } from 'react';
import MdPlayArrow from 'react-icons/lib/md/play-arrow';

const AudioContext = window.AudioContext // Default
                     || window.webkitAudioContext
                     || false; 

class Player extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    this.audioContext = new AudioContext();

    this.audioRef.addEventListener('loadeddata', () => {
      if (this.audioRef&&!isNaN(this.audioRef.duration)) {
        this.audioSource = this.audioContext.createMediaElementSource(this.audioRef);
        this.audioSource.connect(this.audioContext.destination);
      }
    });
  }

  handleOnPlayClick() {
     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;

当handlePlayOnClick触发时，音频仅播放一个＆＃34; note＆＃34; （不到第二，然后沉默）。如果我记录变量，则audioSource.mediaElement.currentTime是正确的。因此，媒体元素认为它正在播放，但没有声音。

如果我使用AudioContext.createMediaElementSource（）删除我创建audioSource的行并连接它，则可以正常播放音频。

为什么使用createMediaElementSource会混淆播放/ AudioContext？