[DEVELOPER][ANGULAR][WEB] Spotify Web SDK Player does not show up on page

[placcidfenis]

I've been trying to implement the Spotify Web Player on Angular, following this tutorial on the Spotify Documentation Page (although it is shown in React). My goal is to have a web player like the one here at the bottom of the page Although I'm getting a success with my spotify authentication and the Web Player is console logging "Ready with Device ID XXXXX", the player does not show up in my component. Is there something I need to add to my component html? I'm stuck with this.

The gist is that on initialization of the player component, I am calling my sdk service to create the web player. Thats it. I think theres a missing step but i dont know what it is. I've tried assigning prop in my player component and assigning it to a return value in the service, and calling it in my html file ,but nothing shows up as well.

here is my current code:

spotify-sdk-web-player.service.ts

import { Injectable } from '@angular/core';
import { SpotifyAuthService } from '../auth/spotify-auth.service';
///  <reference types="../node_modules/@types/spotify-web-playback-sdk/index.d.ts"/>
declare global {
  interface window {
    onSpotifyWebPlaybackSDKReady: () => void;
    spotifyReady: Promise<void>;
  }
}
@Injectable({
  providedIn: 'root',
})
export class SpotifySdkWebPlayerService {
  spotifyPlayer!: Spotify.Player;
  // private spotifyToken!: string;
  constructor(private spotifyAuth: SpotifyAuthService) {}

  createWebPlayer(spotifyToken: string) {
    const script = document.createElement('script');
    script.src = 'https://sdk.scdn.co/spotify-player.js';
    script.type = 'text/javascript';
    script.addEventListener('load', (e) => {
      console.log(e);
    });
    document.head.appendChild(script);
    window.onSpotifyWebPlaybackSDKReady = () => {
      console.log(
        'The Web Playback SDK is ready. We have access to Spotify.Player'
      );
      this.spotifyPlayer = new Spotify.Player({
        name: 'Web Playback SDK Quick Start Player',
        getOAuthToken: (cb) => {
          cb(spotifyToken);
        },
        volume: 0.5,
      });

      this.spotifyPlayer.addListener('ready', ({ device_id }) => {
        console.log('Ready with Device ID', device_id);
      });

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

      this.spotifyPlayer.addListener('initialization_error', ({ message }) => {
        console.error(message);
      });

      this.spotifyPlayer.addListener('authentication_error', ({ message }) => {
        console.error(message);
      });

      this.spotifyPlayer.addListener('account_error', ({ message }) => {
        console.error(message);
      });

      this.spotifyPlayer.connect();
    };
  }
}

player.component.ts

import { Component, OnDestroy, OnInit } from '@angular/core';
import { SpotifyAuthService } from 'src/app/services/auth/spotify-auth.service';
import { SpotifySdkWebPlayerService } from 'src/app/services/spotify/spotify-sdk-web-player.service';
/// <reference path="../node_modules/@types/spotify-web-playback-sdk/index.d.ts"/>

@Component({
  selector: 'app-player',
  templateUrl: './player.component.html',
  styleUrls: ['./player.component.css'],
})
export class PlayerComponent implements OnInit {
  constructor(    private spotifyAuth: SpotifyAuthService,
    private spotifyWebSDK: SpotifySdkWebPlayerService
  ) {}
  ngOnInit(): void {
    this.spotifyAuth
      .getSpotifyToken()
      .then((token: any) => this.spotifyWebSDK.createWebPlayer(token['token']));
  }
}

here are my console logs

Appreciate any help and /or direction with this

[Prague]

Waggin' hello to you placcidfenis! lol

Based on the first code you provided, it seems like you're missing the HTML element in your component's template to render the Spotify player. Here's what you can do to add the player to your component's HTML:

• Open your player.component.html file.
• Add an HTML element with an id that matches the element you want to render the Spotify player in. For example, if you want to render the player in a div with the id spotify-player, you can add the following line:

<div id="spotify-player"></div>

• Save the changes to the file.

Once you've added the element to your component's template, the Spotify Web SDK Player should be able to render within that element when the SDK is ready.

Make sure to check the CSS styles applied to the player component or the #spotify-player element as well. Ensure that there are no styles that hide or obstruct the visibility of the player.

After making these changes, try running your application again and see if the Spotify player shows up on the page.

-

The code in your player.component.ts file looks fine. It initializes the Spotify Web SDK Player by calling the createWebPlayer method from the SpotifySdkWebPlayerService when the component is initialized.

Now that you have added the necessary HTML element in your component's template, the Spotify player should render within that element.

Make sure that the PlayerComponent is included in the appropriate part of your application's structure so that it gets rendered on the page.

Additionally, ensure that you have the required CSS styles defined for the player component and its container to properly display the player.

If you have completed these steps and the player still does not show up, please provide the updated code, including the HTML template, CSS styles, and any error messages you encounter in the browser's console. This will help in further troubleshooting the issue.

Don't leave me in the doghouse, keep me informed!

-Prague the Dog

[placcidfenis]

Thanks Prague, I have pivoted from using the Web Playback SDK to using the iFrameApi due to a time constraint. I've also ran into issues with the iFrame, would appreciate it if you could take a look and tell me what you think?

Thanks,

pf

[Prague]

I’m panting to help, drop some code and I’ll be more then happy to review.

Best,

-Prague the Dog

[placcidfenis]

Hey Prague, appreciate your help. I've posted the problem and some code at this link https://community.spotify.com/t5/Spotify-for-Developers/ANGULAR-iFrameApi-Stuck-in-preview-mode-afte...

looking forward to your reply and advice!

best,

pf