createMediaElementSource ios safari no audio

Question

我使用此代码播放音频，在ios chrome上运行良好，但在safari上则不然。有人知道可能是什么问题吗？

var audio, gainNode, audioContext;
audio = new Audio();
audio.crossOrigin = "anonymous";
function playme() {
audio.src = "https://greggman.github.io/doodles/sounds/DOCTOR VOX - Level Up.mp3";
audioContext = new (window.AudioContext || window.webkitAudioContext)();
var source = audioContext.createMediaElementSource(audio);

gainNode = audioContext.createGain();
source.connect(gainNode);
gainNode.connect(audioContext.destination);
gainNode.gain.value = 1; 
try {
audio.play();
} catch (e) {
console.log(e);
}

}

<a href="#" onclick="playme();return false;">play</a>

变假"gt；播放

Answer 1

在Safari 15.1上进行了测试，结果很奇怪。Safari在gainNode.gain.value卷启动之前首先在audio.volume上播放一些样本

const audio = new Audio()
const audioSrc = 'https://greggman.github.io/doodles/sounds/DOCTOR VOX - Level Up.mp3'
const audioCtx = new (AudioContext || webkitAudioContext)()
const sourceNode = audioCtx.createMediaElementSource(audio);
const gainNode = audioCtx.createGain();
audio.volume = 1  // gainNode will override volume
audio.autoplay = false
audio.crossOrigin = 'anonymous'
sourceNode.connect(gainNode);
gainNode.connect(audioCtx.destination);
gainNode.gain.value = 0.5; 
const play = async () => {
await stop()
audio.src = audioSrc
audio.oncanplaythrough = async event => {
console.log(event.type)
await audioCtx.resume()
audio.play()
}
}
const stop = () => {
return Promise.all([
audio.pause(),
audioCtx.suspend(),
])
}
document.querySelector('#play').onclick = play
document.querySelector('#stop').onclick = stop

button { padding: 1em 2em; }

<button id="play">Play</button>
<button id="stop">Stop</button>