createMediaElementSource ios safari 没有音频

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>

转为假；">播放

Answer 1

在 Safari 15.1 上测试，结果很奇怪。 Safari 首先在audio.volume 播放一些样本，然后gainNode.gain.value 音量开始播放。

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>