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.
