如何通过Spotify API获取指定单曲并在JavaScript应用中播放

1. 完成Spotify API授权 #

首先必须获取访问令牌，Spotify API的所有请求都需要授权。纯前端场景可以用Implicit Grant Flow：

const clientId = '你的客户端ID';
const redirectUri = '你的重定向URI';
const scopes = 'user-read-private user-read-email streaming'; // 包含播放权限的必要权限

function login() {
  window.location = `https://accounts.spotify.com/authorize?client_id=${clientId}&response_type=token&redirect_uri=${encodeURIComponent(redirectUri)}&scope=${encodeURIComponent(scopes)}`;
}

授权成功后，浏览器地址栏会返回access_token，提取该令牌并存储起来供后续使用。

2. 精准搜索目标单曲 #

使用Spotify的Search API，通过指定artist和track的组合语法精准定位单曲，同时限制返回结果数量为1：

const accessToken = '提取到的访问令牌';
const targetArtist = 'James Brown';
const targetTrack = 'Living in America';

async function searchTargetTrack() {
  const response = await fetch(
    `https://api.spotify.com/v1/search?q=artist:${encodeURIComponent(targetArtist)}%20track:${encodeURIComponent(targetTrack)}&type=track&limit=1`,
    { headers: { 'Authorization': `Bearer ${accessToken}` } }
  );
  const data = await response.json();
  return data.tracks.items[0]; // 直接取最匹配的第一条结果
}

3. 提取并展示单曲信息 #

拿到单曲对象后，可以从中提取歌曲名、艺术家、专辑封面等信息用于页面展示：

async function renderTrackInfo() {
  const track = await searchTargetTrack();
  if (!track) {
    console.log('未找到指定单曲');
    return;
  }
  // 将信息渲染到页面元素
  document.getElementById('track-title').textContent = track.name;
  document.getElementById('artist-name').textContent = track.artists[0].name;
  document.getElementById('album-cover').src = track.album.images[0].url;
  
  return track.uri; // 返回单曲的Spotify URI，用于后续播放
}

4. 初始化播放器并播放单曲 #

要在前端实现播放，需要引入Spotify官方提供的Web Playback SDK，然后初始化播放器并调用播放接口：

let spotifyPlayer;

// 等待SDK加载完成后执行初始化
window.onSpotifyWebPlaybackSDKReady = async () => {
  const accessToken = '你的访问令牌';
  const trackUri = await renderTrackInfo();

  spotifyPlayer = new Spotify.Player({
    name: '你的JavaScript应用播放器',
    getOAuthToken: callback => { callback(accessToken); },
    volume: 0.5
  });

  // 监听播放器就绪事件
  spotifyPlayer.addListener('ready', ({ device_id }) => {
    console.log('播放器已就绪，设备ID:', device_id);
    // 触发播放操作
    playTargetTrack(device_id, trackUri);
  });

  spotifyPlayer.addListener('not_ready', ({ device_id }) => {
    console.log('播放器未就绪，设备ID:', device_id);
  });

  // 连接播放器
  spotifyPlayer.connect();
};

async function playTargetTrack(deviceId, trackUri) {
  await fetch(
    `https://api.spotify.com/v1/me/player/play?device_id=${deviceId}`,
    {
      method: 'PUT',
      headers: {
        'Authorization': `Bearer ${accessToken}`,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ uris: [trackUri] })
    }
  );
}

关键注意事项 #

• 确保你的Spotify开发者后台已添加正确的重定向URI，否则授权流程会失败。
• 播放功能需要用户拥有Spotify Premium账号，免费账号仅能预览30秒。
• 若存在同名单曲，可在搜索参数中加入专辑名进一步缩小范围，比如q=artist:James Brown track:Living in America album:Gravity。

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