Angular：使用“@types/spotify-web-playback-sdk”时出现“ReferenceError: Spotify is not defined”

Question

我正在尝试在一个有角度的项目中使用 spotify 的 webplayer sdk。我按照这个问题和答案中给出的步骤：安装类型包，然后将类型引用添加到我正在使用的文件的开头

Spotify namespace

npm install --save @types/spotify-web-playback-sdk

和

///  <reference types="@types/spotify-web-playback-sdk"/>

作为文件中的第一行。

我的代码看起来像这样

//class variable
spotifyPlayer: Spotify.Player | null = null

和

createWebPlayer(){
    const accessToken = this.authObject.access_token
    this.spotifyPlayer = new Spotify.Player({ //line 107
      name: 'Web Playback SDK Quick Start Player',
      getOAuthToken: cb => {
        cb(accessToken)
      },
      volume: 0.5
    })

    //ready
    this.spotifyPlayer!.addListener('ready', ({ device_id }) => {
      console.log('Ready with Device ID', device_id);
    });
  
    // Not Ready
    this.spotifyPlayer!.addListener('not_ready', ({ device_id }) => {
      console.log('Device ID has gone offline', device_id);
    });
}

编译器对此没有问题，但是当我调用

createWebPlayer()

时我得到了错误

ERROR ReferenceError: Spotify is not defined
    createWebPlayer home.component.ts:107

我正在手动调用该函数，并且是在获得访问令牌后才执行的，所以这应该不是问题；我真的很难过。

我试过的

我试过像这样添加导入语句

import * as Spotify from 'spotify-web-playback-sdk'

但是我得到的错误是它不是一个模块。我做的唯一安装是运行

npm install --save @types/spotify-web-playback-sdk

我也试过把107号线换成

this.spotifyPlayer = new window.Spotify.Player({

但这给出了类似的错误

ERROR ReferenceError: window.Spotify is not defined
    createWebPlayer home.component.ts:107

再次，我很困惑，我觉得我错过了一些明显的东西。 任何帮助都会很棒！

Answer 1

好的，所以我解决了问题（我认为）。从this angular project (github link)我发现我需要将脚本添加到html页面。我猜类型文件只是为了避免出现类型错误，实际上并没有链接到代码？

我从那个项目复制的代码是：

onst 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');

我当前的代码现在看起来像这样：

createWebPlayerTwo () {
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'
  )
  const accessToken = this.authObject.access_token
  this.spotifyPlayer = new Spotify.Player({
    name: 'Web Playback SDK Quick Start Player',
    getOAuthToken: cb => {
      cb(accessToken)
    },
    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()
  console.log('hi')
}

}

它正在工作:)..

我收到消息 “准备好设备 ID 13b20fd9...”

Answer 2

我在这里有一个后续问题

[https://stackoverflow.com/questions/76063276/spotify-sdk-angular-i-cant-show-the-spotify-web-player-in-my-app]

不确定我是否严重误解了文档，但我无法让我的网络播放器显示在我的页面上，即使它已完全验证并连接到 Spotify。感谢任何帮助