How to solve the problems that arise when playing sound effects with audio tags and AudioContext on iPad at the same time? - Codes Helper

After playing audio with the

audio tag, the iPad (currently only found on iPad, and both high, middle and low end models will appear) will cause problems with subsequent sound effects played with AudioContext (the playback rate slows down inexplicably)

related test codes

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <title>audio test</title>
  <meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="full-screen" content="true" />
  <meta name="screen-orientation" content="portrait" />
  <meta name="x5-fullscreen" content="true" />
  <meta name="360-fullscreen" content="true" />
  <style>
    html,
    body {
      background: -sharpaaa;
      padding: 0;
      border: 0;
      margin: 0;
      height: 100%;
    }

    .audio-btn {
      display: block;
      width: 100px;
      height: 100px;
      background: -sharp999;
    }
  </style>
</head>

<body>
  <div>
    <button class="audio-btn audio-html-btn">
      audio tag
      <audio class="audio" src="https://teacher-media.vipkid.com.cn/class/homework/file/b445fdfa-d586-4999-9ec0-fb407735fbe8.mp3" preload="auto"></audio>
    </button>
  </div>
  <button class="audio-btn audio-btn-html" style="background: -sharp000;">
    <span style="color:-sharpfff">play webAudio</span>
  </button>
  <script>
    // audio
    let btn = document.querySelector(".audio-html-btn")
    let audio = document.querySelector(".audio")
    btn.addEventListener("click", function () {
      audio.play()
    })

    // web audio 
    let btn2 = document.querySelector(".audio-btn-html")
    window.AudioContext = window.AudioContext || window.webkitAudioContext;
    var context = new AudioContext();
    var request = new XMLHttpRequest();
    var bufferArr = null
    request.open("GET", "https://teacher-media.vipkid.com.cn/class/homework/file/e2598a9a-f6bd-4132-bcf6-8b1e5dc2757f.mp3", true);
    request.responseType = "arraybuffer";
    //
    request.onload = function () {
      context.decodeAudioData(request.response, function (buffer) {
        bufferArr = buffer
      });
    }
    request.send();
    btn2.addEventListener("click", function () {
      var source = context.createBufferSource();
      source.buffer = bufferArr;//   
      source.connect(context.destination);// 
      source.start(0);//
      console.log("2", context, source)
    })
  </script>
</body>

</html>

Test code description: as long as you first click audio tag on the page to trigger audio to play audio, and then click play webAudio to use web audio to play audio, the sound will slow down.

Audio resource for testing, mp3 format, audio bit rate used by audio tag 80kbps; sampling rate 16kHz. The audio bit rate used by web audio is 96kbps; the sampling rate is 44.1kHz.