Spotify 网络播放 SDK

Posted 2023-04-15

技术标签:

【中文标题】Spotify 网络播放 SDK【英文标题】：Spotify Web Playback SDK 【发布时间】：2019-02-08 04:10:22 【问题描述】：

嘿，我正在关注 Glitch https://glitch.com/~spotify-web-playback 的这个例子

当我运行他们在 Glitch 网站上提供的示例时，应用程序运行完美。但是，一旦我构建了应用程序并使用节点（在本地主机之外）运行它，我就永远不会到达 Spotify 登录页面。只是想知道是否有人在尝试构建应用程序时遇到同样的问题以及我可能会出错的地方。除了包含我自己的“ClientId”之外，我不会更改任何代码。唯一的区别是我使用 index.ejs 文件而不是使用 index.html，因为我是从以下 server.js 文件中调用它：

const express = require('express');
const bodyParser = require('body-parser');
const app = express()

app.use(express.static('public'));
app.use(bodyParser.urlencoded( extended: true ));
app.set('view engine', 'ejs')

app.get('/', function (req, res) 
  res.render('index', userInput: null, error: null);
)

app.post('/', function (req, res) 
    res.render('index');
  )

app.listen(3000, function () 
  console.log('Example app listening on port 3000!')
)

index.ejs

<!DOCTYPE html>
<html>

  <head>
    <title>Spotify Web Playback SDK Template</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://sp-bootstrap.global.ssl.fastly.net/8.0.0/sp-bootstrap.min.css" rel="stylesheet" />
    <script
      src="https://code.jquery.com/jquery-3.2.1.min.js"
      integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
      crossorigin="anonymous"></script>

    <!-- Include the Web Playback SDK -->
    <script src="https://sdk.scdn.co/spotify-player.js"></script>

    <!-- Include our javascript -->
    <script src="/script.js" defer></script>
  </head>

  <body class="container">
    <h1 class="text-salmon">Spotify Web Playback SDK Template</h1>
    <h4>This app uses the implicit grant authorization flow to get an access token and initialise the Web Playback SDK. It then uses the Spotify Connect Web API to play a song.</h4>
    <p>If everything is set up properly, you should hear some music!</p>
    <img id="current-track"/>
    <h3 id="current-track-name"></h3>
    <a class="btn btn-salmon btn-lg" href="https://glitch.com/edit/#!/spotify-web-playback">Get started!</a>
  </body>

</html>

script.js

// Get the hash of the url
const hash = window.location.hash
.substring(1)
.split('&')
.reduce(function (initial, item) 
  if (item) 
    var parts = item.split('=');
    initial[parts[0]] = decodeURIComponent(parts[1]);
  
  return initial;
, );
window.location.hash = '';

// Set token
let _token = hash.access_token;
//console.log("Made it here");
const authEndpoint = 'https://accounts.spotify.com/authorize';

// Replace with your app's client ID, redirect URI and desired scopes
const clientId = 'CLIENTID';
const redirectUri = 'https://spotify-web-playback.glitch.me';
const scopes = [
  'streaming',
  'user-read-birthdate',
  'user-read-private',
  'user-modify-playback-state'
];

// If there is no token, redirect to Spotify authorization
if (!_token) 
  window.location = `$authEndpoint?client_id=$clientId&redirect_uri=$redirectUri&scope=$scopes.join('%20')&response_type=token&show_dialog=true`;


// Set up the Web Playback SDK

window.onSpotifyPlayerAPIReady = () => 
  const player = new Spotify.Player(
    name: 'Web Playback SDK Template',
    getOAuthToken: cb =>  cb(_token); 
  );

  // Error handling
  player.on('initialization_error', e => console.error(e));
  player.on('authentication_error', e => console.error(e));
  player.on('account_error', e => console.error(e));
  player.on('playback_error', e => console.error(e));

  // Playback status updates
  player.on('player_state_changed', state => 
    console.log(state)
    $('#current-track').attr('src', state.track_window.current_track.album.images[0].url);
    $('#current-track-name').text(state.track_window.current_track.name);
  );

  // Ready
  player.on('ready', data => 
    console.log('Ready with Device ID', data.device_id);

    // Play a track using our new device ID
    play(data.device_id);
  );

  // Connect to the player!
  player.connect();


// Play a specified track on the Web Playback SDK's device ID
function play(device_id) 
  $.ajax(
   url: "https://api.spotify.com/v1/me/player/play?device_id=" + device_id,
   type: "PUT",
   data: '"uris": ["spotify:track:5ya2gsaIhTkAuWYEMB0nw5"]',
   beforeSend: function(xhr)xhr.setRequestHeader('Authorization', 'Bearer ' + _token );,
   success: function(data)  
     console.log(data)
   
  );

【问题讨论】：

【参考方案1】：

我很确定我来帮助你解决这个问题已经太晚了，但也许未来一些不幸的灵魂仍然需要一个答案......

script.js

redirectUri

然后您必须转到 Spotify 开发者仪表板 将该链接添加到您的应用。

转到此链接：https://developer.spotify.com/dashboard/applications 选择您的应用程序 -> 编辑设置 -> 重定向 Uri 的在此处添加相同的链接

【讨论】：

以上是关于Spotify 网络播放 SDK的主要内容，如果未能解决你的问题，请参考以下文章