实现后台播放：如何在React Native+Node.js移动端集成Spotify？

核心问题分析 #

• preview_url是Spotify Web API的限制，仅提供30秒片段且不稳定，无法获取完整歌曲流
• 跳转Spotify应用的链接无法直接触发播放，必须依赖Spotify官方移动端SDK实现完整播放能力

正确实现路径 #

1. 前端（React Native）集成Spotify官方SDK #

放弃使用Web API的preview_url，改用Spotify移动端SDK实现完整播放：

• 直接使用Spotify提供的Android/iOS原生SDK，或使用封装好的React Native库（如react-native-spotify-remote）
• SDK支持完整歌曲播放、后台播放控制、播放状态同步等核心能力

2. 调整认证流程 #

必须采用Authorization Code Flow with PKCE（移动端专属认证流程），替代当前的Client Credentials Flow：

• 用户需授权应用访问其Spotify账户，获取streaming等核心权限
• 后端仅需辅助处理授权回调、令牌交换，无需直接处理播放逻辑

3. 后台播放配置 #

• iOS：在Info.plist中添加UIBackgroundModes并包含audio权限
• Android：在AndroidManifest.xml中声明FOREGROUND_SERVICE权限，配置音频服务
• 使用SDK提供的播放API，而非原生audio元素，SDK会自动处理后台播放

代码示例调整建议 #

后端（Node.js）：处理授权流程 #

const express = require("express");
const { SpotifyApi } = require("@spotify/web-api-ts-sdk");
const cors = require("cors");

const app = express();
const port = 3000;
app.use(cors());

const spotifyApi = new SpotifyApi({
  clientId: "YOUR_CLIENT_ID",
  redirectUri: "YOUR_REDIRECT_URI", // 对应React Native的Deep Link或自定义Scheme
});

// 生成用户授权URL
app.get("/auth-url", (req, res) => {
  const scopes = [
    "streaming",
    "user-read-playback-state",
    "user-modify-playback-state",
    "user-read-currently-playing"
  ];
  const authUrl = spotifyApi.createAuthorizeURL(scopes, "YOUR_STATE");
  res.json({ authUrl });
});

// 授权回调，交换访问令牌
app.get("/callback", async (req, res) => {
  const { code } = req.query;
  try {
    const { body } = await spotifyApi.authorizationCodeGrant(code);
    res.json({
      accessToken: body.access_token,
      refreshToken: body.refresh_token,
      expiresIn: body.expires_in
    });
  } catch (error) {
    res.status(500).json({ error: "Token exchange failed" });
  }
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

React Native前端：实现播放控制 #

import React, { useEffect, useState } from 'react';
import { View, Button, Text } from 'react-native';
import SpotifyRemote from 'react-native-spotify-remote';

const SpotifyPlayer = () => {
  const [isConnected, setIsConnected] = useState(false);

  useEffect(() => {
    const connectToSpotify = async () => {
      try {
        await SpotifyRemote.initialize({
          clientID: 'YOUR_CLIENT_ID',
          redirectURL: 'YOUR_REDIRECT_URI'
        });
        const session = await SpotifyRemote.connect();
        setIsConnected(true);
      } catch (error) {
        console.error('Spotify连接失败:', error);
      }
    };

    connectToSpotify();
    return () => SpotifyRemote.disconnect();
  }, []);

  const playTrack = async () => {
    if (!isConnected) return;
    try {
      // 播放指定歌曲
      await SpotifyRemote.playUri('spotify:track:7J1uxwnxfQLu4APicE5Rnj');
    } catch (error) {
      console.error('播放失败:', error);
    }
  };

  return (
    <View>
      <Text>{isConnected ? '已连接Spotify' : '未连接'}</Text>
      <Button title="播放歌曲" onPress={playTrack} />
    </View>
  );
};

export default SpotifyPlayer;

关键注意事项 #

• 在Spotify开发者后台配置正确的重定向URI，确保streaming等权限已申请
• 严格按照移动端平台要求配置后台音频权限，否则后台播放会被系统终止
• react-native-spotify-remote需要正确链接原生依赖，iOS用CocoaPods安装，Android配置gradle

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