AudioContext Analyser working on firefox/chrome but not Safari

Question

I am writing a visualizer for audio and am having an issue with safari on mac os x and on ios debugging with the remote debugger. On the animation function to update the AudioContext analyser the values in the ByteFrequency array are not updating on safari. Below is a sample of the code:

var context;
if (typeof AudioContext !== "undefined") {
    context = new AudioContext();
} else if (typeof webkitAudioContext !== "undefined") {
    context = new webkitAudioContext();
}
var analyser = context.createAnalyser();
analyser.fftSize = 64;
frequencyData = new Uint8Array(analyser.frequencyBinCount);

// Get the frequency data and update the visualisation

function update() {
    requestAnimationFrame(update);
    analyser.getByteFrequencyData(frequencyData); 
};

$(document).ready(function(){
    $("#player").bind('canplay', function() {
        var source = context.createMediaElementSource(this);
        source.connect(analyser);
        analyser.connect(context.destination);
    });
};

here is a link to the working example http://basketballjock.org/

score 0 · Answer 1 · answered Dec 30 '19 at 09:15

In safari you nead to create audio context after user interaction. For example in a button onclick callback.

HTML: <button onclick="play">Play</button>

Javascript:

function play() {
  var context;
  if (typeof AudioContext !== "undefined") {
      context = new AudioContext();
  } else if (typeof webkitAudioContext !== "undefined") {
      context = new webkitAudioContext();
  }
  var analyser = context.createAnalyser();
  analyser.fftSize = 64;
  frequencyData = new Uint8Array(analyser.frequencyBinCount);

  // Get the frequency data and update the visualisation

  function update() {
    requestAnimationFrame(update);
    analyser.getByteFrequencyData(frequencyData); 
  };

  var source = context.createMediaElementSource(this);
  source.connect(analyser);
  analyser.connect(context.destination);
}

AudioContext Analyser working on firefox/chrome but not Safari

1 Answers1