Player가 연결될 때 견고성 수준을 지정하는 것이 좋습니다라는 경고 메시지가 발생합니다.

Spotify Web Playback SDK에서 지원하는 Player를 connect하고 나면 다음과 같은 경고 메시지가 나옵니다.

It is recommended that a robustness level be specified. Not specifying the robustness level could result in unexpected 
The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the https://goo.gl/7K7WLu.

메시지의 내용을 해석하자면 견고성 수준을 지정하지 않아 오디오 컨텍스트의 시작이 되지 않는다는 뜻입니다. 일단 견고성 수준이란 무엇이며 이를 지키기 위해서는 어떤 조치를 취해야 하는지 잘 모르겠습니다. Player 관련 코드를 올리겠습니다.

// WebPlayback.tsx
import { useEffect, createContext, useState } from 'react';
import { getAccessToken } from '../utils/functions/accessToken';
import Player from './Player';

export type TPlayer = Spotify.Player;

interface SpotifyPlayerContextInitialState {
  deviceId: string;
  player: TPlayer | null;
}

export const SpotifyPlayerContext =
  createContext<SpotifyPlayerContextInitialState>({
    player: null,
    deviceId: '',
  });

function WebPlayback() {
  const [deviceId, setDeviceId] = useState('');
  const [player, setPlayer] = useState<TPlayer | null>(null);
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://sdk.scdn.co/spotify-player.js';
    script.async = true;

    document.body.appendChild(script);

    window.onSpotifyWebPlaybackSDKReady = () => {
      const player = new window.Spotify.Player({
        name: 'Web Playback SDK',
        getOAuthToken: (cb) => {
          cb(getAccessToken());
        },
        volume: 1,
      });

      setPlayer(player);
      player.addListener('ready', ({ device_id }) => {
        setDeviceId(device_id);
        console.log('Ready with Device ID', device_id);
      });

      player.addListener('not_ready', ({ device_id }) => {
        console.log('Device ID has gone offline', device_id);
      });

      player.connect();
    };
  }, []);

  return (
    <>
      <SpotifyPlayerContext.Provider
        value={{
          deviceId,
          player,
        }}
      >
        <Player />
      </SpotifyPlayerContext.Provider>
    </>
  );
}

export default WebPlayback;

import axios from 'axios';
import React from 'react';
import styled from 'styled-components';
import { useContext } from 'react';
import { getAccessToken } from '../utils/functions/accessToken';

import play from '../utils/functions/play';
import { SpotifyPlayerContext } from './WebPlayback';

interface OnPlayProps {
  spotify_uri: string;
  device_id: string;
  playerInstance: Spotify.Player | null;
}

const Section = styled.section`
  position: fixed;
  bottom: 0;
`;

function Player() {
// Player.tsx
  const SpotifyPlayer = useContext(SpotifyPlayerContext);
  const onPlay = ({ spotify_uri, device_id, playerInstance }: OnPlayProps) => {
    if (playerInstance === null) return;
    play({ spotify_uri, device_id, playerInstance });
  };

  const skipPrev = () => {};
  const skipNext = () => {};
  return (
    <Section>
      <div>
        <h5>title</h5>
        <p>artist</p>
      </div>
      <div>
        <button
          onClick={() =>
            onPlay({
              spotify_uri: 'spotify:track:31NSDwCjIRYaPJW3tNNGUv',
              device_id: SpotifyPlayer.deviceId,
              playerInstance: SpotifyPlayer.player,
            })
          }
        >
          Play
        </button>
        <button onClick={skipPrev}>Prev</button>
        <button onClick={skipNext}>Next</button>
      </div>
    </Section>
  );
}

export default Player;

somn45 / mucketlist

Player가 연결될 때 견고성 수준을 지정하는 것이 좋습니다라는 경고 메시지가 발생합니다. #9