I have speaker buttons that work fine on desktop and Android but not on iOS. Code attached below.

This is the button:

<button className='cursor-pointer' onClick={() => handlePlayAudio('question')}>
    <AiFillSound className="text-4xl mb-4"/>
</button>

And this is the audio handler:

const handlePlayAudio = (audioType) => {
    const audioData = audioType === 'question' ? questionData : answerData;
    if (audioData) {
      const audioBlob = new Blob([audioData]);
      const audioUrl = URL.createObjectURL(audioBlob);
      const audio = new Audio(audioUrl);
      audio.play();
    }
  };

I have tried using the CSS class ‘cursor-pointer’ from TailwindCSS. This does not work. I have tried using an onPointerEnter, as this was the most recent suggestion I could find for this issue, but that also did not solve the issue.