Safari 14.1 Audio Issue

by KrisJohnson

HTML

<input id="startbtn" type="button" value="Start Adding Sounds" onClick="startAdding()"/>
<input id="stopbtn" type="button" value="Stop Adding" onClick="stopAdding()"/>
<div id="SFXcount"></div>

JavaScript

let sfxBuffers={}, activeSounds=0, _interval=null;

//Create Listener
const context = new(window.AudioContext || window.webkitAudioContext)();
const listenerGain = context.createGain();
listenerGain.connect(context.destination);
listenerGain.gain.value = 1;


//** Start Interval - adding sounds every ~6 ms
function startAdding() {
	stopAdding();
  loadSfx('meow', getMeow());
	_interval = setInterval(() => { PlaySfx('meow', false); }, 6);
}



function stopAdding() {
	if(_interval) {
	  clearTimeout(_interval);
    _interval = null;
  }
}


function PlaySfx(sfxName,loop) {

	let buffer = sfxBuffers[sfxName];
  if(!buffer) return;
  
  let gain = context.createGain();
  gain.connect(listenerGain);
  gain.gain.setTargetAtTime( 0.5, context.currentTime, 0.01 );

	let panner = context.createPanner();
	panner.panningModel = 'HRTF';
	panner.maxDistance = 5;
	panner.rolloffFactor = 1;
	panner.refDistance = 1;
  panner.coneInnerAngle = 360;
	panner.coneOuterAngle = 0;
	panner.coneOuterGain = 0;
	panner.connect(gain);

  let source = context.createBufferSource();
  source.buffer = buffer;
  source.connect(panner);
  source.onended = () => {
  	gain.disconnect();
  	updateCount(-1);
  };
  source.start();
  updateCount(1);
  
  source.loop = loop;

}


function loadSfx(name, base64) {
	if(!sfxBuffers[name]) {
    context.decodeAudioData(base64ToArrayBuffer(base64).buffer,
    function(buffer) {
    	sfxBuffers[name] = buffer;
    },function(e) {
      console.error("error decoding audio data" + e);
    });
  }
  function base64ToArrayBuffer(base64) {
    var binary_string =  window.atob(base64);
    var len = binary_string.length;
    var bytes = new Uint8Array( len );
    for (var i = 0; i < len; i++)        {
        bytes[i] = binary_string.charCodeAt(i);
    }
    return bytes;
	}
}


function updateCount(amount) {
	let elem = document.getElementById('SFXcount');
  activeSounds += amount;
  elem.innerText = 'Active Sounds:'+activeSounds;
}



function getMeow() { return...