14 C
Canberra
Sunday, October 26, 2025

reactjs – Spotify Net Playback SDK Works on Android and Home windows however Not on Mac Chrome or iOS


I am utilizing the Spotify Net Playback SDK to combine playback performance in my app. The setup works completely on Android units and Home windows Chrome, however I am encountering points on Mac Chrome and all iOS units.

The SDK appears to fail in initializing or connecting the participant on these units. I’ve carried out numerous error listeners (e.g., for initialization, authentication, and account errors), however none of them present any clues as to why this concern is going on.

Right here’s a simplified model of my hook setup for the SDK:

const useSpotifyWebPlaybackSdk = (session: ExtendedSession | null) => {
  const [isReady, setIsReady] = useState(false);
  const [deviceId, setDeviceId] = useState("");
  const playerRef = useRef(null);

  useEffect(() => {
    if (!session?.accessToken) return;

    const initializePlayer = async () => {
      if (!window.Spotify) {
        setInitError("Spotify SDK not loaded");
        return;
      }

      const participant = new window.Spotify.Participant({
        identify: "My App Participant",
        getOAuthToken: (cb) => cb(session.accessToken!),
      });

     participant.addListener("prepared", ({ device_id }) => setDeviceId(device_id));
      participant.addListener("initialization_error", ({ message }) => console.error(message));

      await participant.activateElement();
      participant.join().then((success) => {
        if (!success) console.error("Failed to hook up with Spotify");
      });

      playerRef.present = participant;
    };

    window.onSpotifyWebPlaybackSDKReady = initializePlayer;

    if (window.Spotify) initializePlayer();
    else {
      const script = doc.createElement("script");
      script.src = "https://sdk.scdn.co/spotify-player.js";
      doc.head.appendChild(script);
    }

    return () => {
      if (playerRef.present) playerRef.present.disconnect();
    };
  }, [session?.accessToken]);

  return { participant: playerRef.present, deviceId, isReady };
};


Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

[td_block_social_counter facebook="tagdiv" twitter="tagdivofficial" youtube="tagdiv" style="style8 td-social-boxed td-social-font-icons" tdc_css="eyJhbGwiOnsibWFyZ2luLWJvdHRvbSI6IjM4IiwiZGlzcGxheSI6IiJ9LCJwb3J0cmFpdCI6eyJtYXJnaW4tYm90dG9tIjoiMzAiLCJkaXNwbGF5IjoiIn0sInBvcnRyYWl0X21heF93aWR0aCI6MTAxOCwicG9ydHJhaXRfbWluX3dpZHRoIjo3Njh9" custom_title="Stay Connected" block_template_id="td_block_template_8" f_header_font_family="712" f_header_font_transform="uppercase" f_header_font_weight="500" f_header_font_size="17" border_color="#dd3333"]
- Advertisement -spot_img

Latest Articles