Spotify веб-воспроизведение API веб-приложение - PullRequest
Новая
       4

Spotify веб-воспроизведение API веб-приложение

1 голос
/ 03 мая 2019

Итак, я пытаюсь создать базовое приложение реагирования, которое использует API Spotify для воспроизведения музыки. Я очень новичок, чтобы реагировать, и до сих пор я написал / собрал два разных кода из разных источников. Первый - «App.js» (который я получил, следуя https://www.youtube.com/watch?v=prayNyuN3w0&t=685s), который аутентифицирует пользователя, генерирует идентификатор токена. Поэтому, когда я запускаю его на localhost: 3000, приложение переходит на localhost: 8888 для получения токена, а затем обратно на localhost: 3000, где размещается мое веб-приложение.

Второй - это очень простой HTML-код "test.html", который я получил с сайта Spotify для разработчиков https://developer.spotify.com/documentation/web-playback-sdk/quick-start/, который позволяет пользователю воспроизводить музыку, если токен был жестко запрограммирован в HTML , Я хочу объединить функциональность этих двух так, чтобы после создания токена приложение позволяло пользователю воспроизводить музыку с помощью утилиты Spotify connect.

Я попытался скопировать html в index.js, но, поскольку там нужен токен, я не знаю, как и где передать токен в index.html. Кроме того, используя JavaScript для воспроизведения внутри componentDidMount, но это дает мне ошибку, говоря, что «spotify.player» не является конструктором

test.html 

<!DOCTYPE html>
<html>
<head>
  <title>Spotify Web Playback SDK Quick Start Tutorial</title>
</head>
<body>
  <h1>Spotify Web Playback SDK Quick Start Tutorial</h1>
  <h2>Open your console log: <code>View > Developer > JavaScript Console</code></h2>

  <script src="https://sdk.scdn.co/spotify-player.js"></script>
  <script>
    window.onSpotifyWebPlaybackSDKReady = () => {
      const token = '[My Spotify Web API access token]';
      const player = new Spotify.Player({
        name: 'Web Playback SDK Quick Start Player',
        getOAuthToken: cb => { cb(token); }
      });

      // Error handling
      player.addListener('initialization_error', ({ message }) => { console.error(message); });
      player.addListener('authentication_error', ({ message }) => { console.error(message); });
      player.addListener('account_error', ({ message }) => { console.error(message); });
      player.addListener('playback_error', ({ message }) => { console.error(message); });

      // Playback status updates
      player.addListener('player_state_changed', state => { console.log(state); });

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

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

      // Connect to the player!
      player.connect();
    };
  </script>
</body>
</html>

App.js 

import React, { Component } from 'react';
import './App.css';

import Spotify from 'spotify-web-api-js';
const spotifyApi = new Spotify();

class App extends Component {
  constructor(){
    super();
    const params = this.getHashParams();
    const token = params.access_token;
    if(token){
      spotifyApi.setAccessToken(token);
    }
    this.state={
      loggedIn: token ? true : false,
      nowPlaying: { name:'Not Checked',
        albumArt: ''
      }
    }
  }

  getHashParams() {
    var hashParams = {};
    var e, r = /([^&;=]+)=?([^&;]*)/g,
        q = window.location.hash.substring(1);
    e = r.exec(q)
    while (e) {
       hashParams[e[1]] = decodeURIComponent(e[2]);
       e = r.exec(q);
    }
    return hashParams;
  }
 getNowPlaying(){
    spotifyApi.getMyCurrentPlaybackState()
      .then((response) => {
        this.setState({
          nowPlaying: { 
              name: response.item.name, 
              albumArt: response.item.album.images[0].url
            }
        });
      })
  }
   render() {
    return (
      <div className="App">
        <a href='http://localhost:8888' > Login to Spotify </a>
        <div>
          Now Playing: { this.state.nowPlaying.name }
        </div>
        <div>
          <img src={this.state.nowPlaying.albumArt} style={{ height: 150 }}/>
        </div>
        { this.state.loggedIn &&
          <button onClick={() => this.getNowPlaying()}>
            Check Now Playing
          </button>
        }
      </div>
    );
  }
}

export default App;

index.html 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <script src="https://sdk.scdn.co/spotify-player.js"></script>
    <div id="root"></div>

  </body>
</html>

Я просто хочу каким-то образом получить токен и воспроизвести музыку, используя этот токен, но, поскольку я не знаком с JS и программированием на основе событий, и раньше я вообще не использовал API, это действительно сложно для меня.

...