createMediaElementSource ios safari 没有音频

Posted 2023-03-22

【中文标题】createMediaElementSource ios safari 没有音频

【英文标题】：createMediaElementSource ios safari no audio

【发布时间】：2022-01-05 07:00:05

【问题描述】：

我正在使用此代码播放音频，在 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>

转为假；">播放

【参考方案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>