Spotify 网络播放 SDK答案

【问题标题】：Spotify Web Playback SDKSpotify 网络播放 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)
   }
  });
}

【问题讨论】：

标签： javascript html ejs spotify

【解决方案1】：

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

您必须在 script.js 文件（第 21 行）中将 redirectUri 更改为您自己的网站路径。

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

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

【讨论】：