I am working on an audio player where a logo is drawn and animated using the element. The animation is based on the audio frequencies analyzed in real time.

Everything works as expected when using an MP3 audio source, but when switching to an M3U8 (HLS) format, the animation stops working specifically on iOS and Safari.

I am using hls.js to handle M3U8 playback, and the audio itself plays fine across all browsers, including Safari. However, the frequency data needed for animation is not being processed correctly on iOS and Safari.

const initializeAudio = () => {
    if (!audioRef.current) {
      audioRef.current = new Audio();
      audioRef.current.loop = false;
      audioRef.current.volume = volume;

      if (Hls.isSupported()) {
        const hls = new Hls();
        hls.loadSource(`.m3u8`);
        hls.attachMedia(audioRef.current);
      } else {
        audioRef.current.src =
          ".m3u8";
      }
    }

    if (!audioContextRef.current) {
      audioContextRef.current = new (window.AudioContext ||
        (window as unknown as { webkitAudioContext?: typeof AudioContext })
          .webkitAudioContext)();

      const analyser = audioContextRef.current.createAnalyser();
      analyser.fftSize = 256;
      analyserRef.current = analyser;

      const source = audioContextRef.current.createMediaElementSource(
        audioRef.current
      );

      const gainNode = audioContextRef.current.createGain();
      gainNode.gain.value = volume;
      gainNodeRef.current = gainNode;

      source.connect(gainNode);
      gainNode.connect(analyser);
      analyser.connect(audioContextRef.current.destination);
    }
  };

• Verified that AudioContext and AnalyserNode are properly initialized.
• Checked if createMediaElementSource(audioElement) works correctly with M3U8.
• Ensured that Safari has autoplay permissions enabled.
• Tried different configurations for the AnalyserNode (e.g., fftSize, smoothingTimeConstant).