基于Spotify API实现网页按钮唤起Spotify播歌的可行性咨询

Absolutely! You can 100% make a website button open and play a track directly in the native Spotify app (instead of the embedded web player). Here's how to do it, along with key details to keep in mind:

The Simplest Approach: Deep Links #

No API auth required for basic playback triggers—just use Spotify's deep linking scheme. Here's how:

• Use Spotify's URI or web link: For any track, album, or playlist, you can use either the spotify:// protocol URI (e.g., spotify:track:4uLU6hMCjMI75M1A2tKUQC) or the standard HTTP link (e.g., https://open.spotify.com/track/4uLU6hMCjMI75M1A2tKUQC). Both will launch the native client if it's installed on the user's device; if not, it'll fall back to the web player or prompt them to download the app.
• Attach it to your button: You can either make the button an anchor tag with the link, or use JavaScript to trigger the open action on click. Example JS snippet:

  document.querySelector('#spotifyPlayBtn').addEventListener('click', () => {
    // Use spotify:// for direct client launch, or HTTP link for better fallback
    window.open('spotify:track:4uLU6hMCjMI75M1A2tKUQC', '_blank');
  });
  

For Advanced Control: Spotify Web API + OAuth #

If you need more than just opening the track (like starting playback automatically, skipping tracks, or controlling volume), you'll need to use the Spotify Web API with OAuth 2.0 authentication:

1. Set up your app: Create an app in the Spotify Developer Dashboard to get your client ID and secret.
2. Authenticate the user: Use OAuth 2.0 to obtain an access token with the user-modify-playback-state scope (this lets you control the user's playback).
3. Trigger playback via API: Use the PUT /v1/me/player/play endpoint, passing the track URI in the request body. Example fetch call:

fetch('https://api.spotify.com/v1/me/player/play', {
  method: 'PUT',
  headers: {
    'Authorization': `Bearer ${userAccessToken}`,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    uris: ['spotify:track:4uLU6hMCjMI75M1A2tKUQC']
  })
});

Key Caveats to Remember #

• Spotify must be installed: If the user doesn't have the native client on their device, the deep link will open the web player or redirect to the app store—you can't force the native client if it's missing.
• Popup blockers: Browsers might block the window.open call if it's not triggered by a direct user interaction (so make sure the click event is tied directly to the button, not a delayed script).
• Active session required: For API-controlled playback, the user needs to be logged into Spotify (either in the client or web player) for the request to work.

内容的提问来源于stack exchange，提问作者lePouns