Inconsistencies on lock screen controls when playing in background on iOS

[carvalhochris]

Describe the bug Started with create-react-app, PWA, the player controls in the lock screen on iOS device appear inconsistently.

It appears sometimes when I go to a native audio app, then back to the PWA's page, the audio changed in and out as expected, and the controls and app name on lock screen appear, but usually not before triggering this process.

html5 is set to true on useGlobalAudioPlayer

function MyPlayer({ file }) {
  const player = useGlobalAudioPlayer();
  const play_state = player.playing;

  console.log(play_state);

  const handleThing = (url) => {
    console.log("handled");
    console.log(url);
    player.load(url);

  };

  const handlePlayPause = () => {
    player.togglePlayPause();
  };

  const loadSong = (url) => {
    console.log("load song...");
    console.log(url);
    handleThing(url);
  };

  useEffect(() => {
    player.load(file, {
      html5: true,
      format: "mp3",
      autoplay: true
    });
  }, []);

  return (
    <>
      <Square
        size="70px"
        // bg="#161616"
        color="black"
        marginTop="7px"
        marginBottom="5px"
        borderStyle="dotted"
        borderWidth="1px"
        borderColor="black"
        onClick={() => handlePlayPause()}
      >
        {play_state ? (
          <>
            {/* <p>playing</p> */}
            <AiOutlinePause />
          </>
        ) : (
          <>
            {/* <p>paused</p> */}
            <BsFillPlayFill />
          </>
        )}
        {/* <button onClick={() => handleThing()}>click</button> */}
        {/* <button onClick={() => loadSong(diff_song)}>load</button> */}
        {/* <button >toggle</button> */}
        {/* <button onClick={() => loadSong(third_song)}>load third</button> */}
        {/* hello world */}
      </Square>
    </>
  );
}

export default MyPlayer;

To Reproduce Steps to reproduce the behavior:

1. Go to 'https://sc-play.vercel.app/'
2. Click on 'play icon'
3. Close browser
4. Open lock screen

Expected behavior Open PWA, play audio, controls already appear in lock screen.

Environment (please complete the following information):

• Browser/ browser version: Chrome for iOS
• Library version: "react-use-audio-player": "^2.1.1"
• React version: "react": "^18.2.0"
• Node version: v18.12.1

[kenslachtajr]

I am seeing similar issues in iOS. The lock screen controls do not work and the player audio volume goes away. Are there any updates on this issue?

[E-Kuerschner]

Hey all, have my hands tied at the moment and won't be able to triage issues on this package for a while - that being said, due to this and a number of other niche issues on mobile devices , I'll happily accept contributions if either of you have the time and want to contribute!

On the issue, I do not have much experience with the Media Session API which I believe drives these types of features. I do know that it only works with HTML5 audio as opposed to the Web Audio API so setting that option to true is required as @carvalhochris called out