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

[vdyalex]

@carvalhochris The moment you close the browser, the browser action handlers are removed.

Although the artwork and playing controls remain the same, iOS doesn't reopen the app/browser in a cold start.

It's a security control to avoid running arbitrary JS code when the app is already closed. It isn't related to the library, but it's connected to iOS specifically. I recommend @E-Kuerschner close the issue as not related to the library, and the media session is handled separately.