1

Can anybody help me to check why this code is not working in Safari (osx)? The audio is is playing, but no visualisation. I tried all the hints I found, but still no luck. Need to mention it's working fine in Chrome (osx) Thanks a lot for help

function getDataFromAudio() {
  var freqByteData = new Uint8Array(analyser.fftSize / 2);
  var timeByteData = new Uint8Array(analyser.fftSize / 2);
  analyser.getByteFrequencyData(freqByteData);
  analyser.getByteTimeDomainData(timeByteData);
  return { f: freqByteData, t: timeByteData }; // array of all 1024 levels
}

Codepen

To be more precise, the visualisation and getByteFrequencyData/getByteTimeDomainData does not work for internet radios (Icecast/shoutcast), but works for single remote mp3.

  1. CodePen - audio stream test icecast - not working in Safari
  2. CodePen - audio stream test mp3 - working in Safari
Vio U
  • 11
  • 1
  • 2

1 Answers1

0

I think this is actually a bug in Safari.

The analyzer data is all zeroes, which is typical if there's a CORS problem. Yet, I don't see any issue with the response headers from that Icecast stream. Access-Control-Allow-Origin is set to * which is the same as the GitHub.io stream.

The only two meaningful differences in the responses that I see:

  • The MP3 file has the erroneous Content-Type of audio/mp3. (It should be audio/mpeg.)
  • Safari requests ICY-style metadata from the stream.

I suspect Safari is handing the stream off to some other component, and its output cannot be captured with the MediaElementSourceNode.

Though, hopefully I'm wrong, and folks can show a real solution and downvote this answer. :-)

Brad
  • 159,648
  • 54
  • 349
  • 530
  • 1
    Seems like you're right. According to the comments on the linked Q/A the problem would come from AVPlayer: https://stackoverflow.com/questions/19403584/avplayer-hls-live-stream-level-meter-display-fft-data – Kaiido Aug 09 '22 at 03:37