React Native Expo应用中调用Spotify选歌播放的问题求助

方案一：使用Spotify App Remote SDK（推荐） #

通过官方的App Remote SDK，你的应用可以直接与用户设备上的原生Spotify APP交互，用户需提前安装Spotify，能实现完整的歌曲播放体验。

• 操作步骤：
  1. 在Spotify开发者后台创建应用，获取Client ID并配置重定向URI。
  2. 用expo-auth-session完成OAuth授权流程，获取访问令牌。
  3. 集成react-native-spotify-remote包（Expo项目需先执行expo prebuild，因为该包依赖原生模块）。
  4. 调用SDK实现歌曲搜索与播放：

     import { SpotifyRemote } from 'react-native-spotify-remote';
     
     async function connectAndPlay() {
       const isConnected = await SpotifyRemote.connect(yourAccessToken);
       if (isConnected) {
         // 搜索目标歌曲
         const searchResults = await SpotifyRemote.search('欲搜索的歌曲名', ['track']);
         // 播放首条结果
         if (searchResults.tracks?.items?.length) {
           await SpotifyRemote.playUri(searchResults.tracks.items[0].uri);
         }
       }
     }
     

方案二：Spotify Web API + Expo Audio组件 #

若不想依赖原生Spotify APP，可调用Spotify Web API获取歌曲的30秒预览URL，再用expo-av播放预览音频（仅支持预览，无法播放完整歌曲）。

• 操作步骤：
  1. 完成OAuth授权获取访问令牌。
  2. 调用Spotify搜索API，提取返回结果中的preview_url字段。
  3. 用expo-av播放预览：

     import { Audio } from 'expo-av';
     
     async function playPreviewAudio(previewUrl) {
       const sound = new Audio.Sound();
       try {
         await sound.loadAsync({ uri: previewUrl });
         await sound.playAsync();
       } catch (err) {
         console.error('预览播放失败:', err);
       }
     }
     

方案三：调整WebView配置（效果有限） #

如果坚持使用WebView，可尝试模拟桌面浏览器的请求头，让Spotify加载桌面版网页，可能支持网页播放，但体验较差且可能随时失效。

• 修改WebView的userAgent：

  <WebView
    source={{ uri: "https://open.spotify.com/" }}
    style={{ flex: 1 }}
    userAgent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36"
    onNavigationStateChange={(navState) => {
      console.log(navState.url);
    }}
  />
  

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