Theo's Typesafe Cult•12mo ago

Audio ist not working on mobile

I am not sure where to ask such question! Audio is not heard when played it works fine on desktop, but not on mobile devices Any idea how to debug it? Here is a demo: https://kamous-1u3x1qrs9-ali-hussein.vercel.app/tools/dictionary

4 Replies

Josh•12mo ago

https://imjosh.dev/blog/bad-questions

Bad Questions

An article by Josh

alexmartos•12mo ago

What browser have you tried with?

Matvey•12mo ago

You can debug mobile devices from your computer. Here is the article on how to do it for android, but there must be something similar for ios too - https://developer.chrome.com/docs/devtools/remote-debugging/

Chrome for Developers

Remote debug Android devices - Chrome for Developers

Remote debug live content on an Android device from a Windows, Mac, or Linux computer.

Ali•12mo ago

I use iPhone 13, and the web browsers I tried were Brave, Firefox Klar and Safari. Here is the code

export const Audio = ({
  isLoadingAudio,
  playAudio,
  audioURL,
  audioRef,
}: AudioProp) => {
  return (
    <>
      <ActionIcon
        onClick={() => playAudio()}
        slot="audio"
      >
        {isLoadingAudio ? (
          <Loader />
        ) : (
          <HiSpeakerWave />
        )}
      </ActionIcon>
      {audioURL && (
        <audio
          ref={audioRef as React.RefObject<HTMLAudioElement>}
          src={audioURL}
        ></audio>
      )}
    </>
  );
}

export const Audio = ({
  isLoadingAudio,
  playAudio,
  audioURL,
  audioRef,
}: AudioProp) => {
  return (
    <>
      <ActionIcon
        onClick={() => playAudio()}
        slot="audio"
      >
        {isLoadingAudio ? (
          <Loader />
        ) : (
          <HiSpeakerWave />
        )}
      </ActionIcon>
      {audioURL && (
        <audio
          ref={audioRef as React.RefObject<HTMLAudioElement>}
          src={audioURL}
        ></audio>
      )}
    </>
  );
}

Gaming

Programming

Audio ist not working on mobile