我想在我的React应用程序中使用Spotify SDK,但我不知道如何转换脚本标签,以便可以将其与onClick事件监听器等配合使用
我可以得到Spotify在文档中提供的示例,但这只是在html文件上。我已经尝试过像其他模块一样导入它,但是我猜它不能那样工作。
示例可以在这里看到: https://developer.spotify.com/documentation/web-playback-sdk/quick-start/
//
import React from 'react';
import axios from 'axios';
import Spotify from "https://sdk.scdn.co/spotify-player.js"
export default class SpotifyPlayer extends React.Component{
state = {
}
handleSDK = () => {
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)
this.setState({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();
};
}
onPlay = () => {
let config = {
someSecret: 'sauce',
someKey: 'value',
device_id: this.state.device_id
};
axios.put('https://api.spotify.com/v1/me/player/play', config)
.then(/* do something */)
.catch(/** handle error */)
};
render() {
this.handleSDK();
return <div>
{/* player goes here */}
<button onClick={}>Play</button>
</div>
};
};
我想知道如何将脚本导入到我的React组件中。