javascript - 在 Spotify API Javascript 中搜索轨道 + 添加到服务器

Question

我正在 web2py 和 vue.js 上构建一个 Web 应用程序，它可以理想地搜索 Spotify 歌曲、列出结果，并让我将选定的结果添加到存储在我的服务器上的播放列表中。

我目前正试图实现 Spotify 搜索功能。他们的文档不是很详尽，我只是一个初学者。

1. 我希望能够在搜索中输入任何内容(播放按钮、轨道标题、艺术家或专辑)，获取结果列表并将其显示在我网站上的表格上(标题、艺术家、专辑) 、专辑封面、持续时间等)。我不知道 Spotify API 上的哪些函数可以用来完成此任务。

2. 列出结果后，我希望能够选择一首歌曲并将其添加到存储在服务器中的播放列表中。我知道如何执行 POST 请求并将项目添加到数据库，但我不知道如何从列表中选择特定结果并将其信息以 JSON 格式发送到我的服务器。我想我不明白歌曲表上的每一行如何链接到可以传递到服务器的特定 JSON 对象。

Answer 1

这是获取 Linkin Park 的 Numb 轨道信息的示例。所以现在您所要做的就是将所有这些命令翻译为 Javascript，与 ajax 或

一起使用

第 1 步:获取轨道 ID

curl -X GET "https://api.spotify.com/v1/search?q=track%3Anumb+artist%3Alinkin+park&type=track" -H "Accept: application/json"

//Javascript
$.get( "https://api.spotify.com/v1/search?q=track%3Anumb+artist%3Alinkin+park&type=track", 
    function( data ) {
        console.log(data);  
    });

第 2 步:获取访问 token

curl H "Authorization: Basic YOUR_CLIENT_CREDENTIALS" -d grant_type=client_credentials https://accounts.spotify.com/api/token

YOUR_CLIENT_CREDENTIALS 是您的ClientId:ClientSecret，您可以使用此函数获取它:

btoa('YOUR_CLIENT_ID:YOUR_CLIENT_SECRET')

做ajax请求实际上有点棘手，Spotify实际上希望你在服务器端做，我建议你引用这个链接:

Access-Control-Allow-Origin denied spotify api

第 3 步:获取音频功能

curl -X GET "https://api.spotify.com/v1/audio-features/YOUR_TRACK_ID" -H "Authorization: Bearer {YOUR_Access-TOKEN}"

假设轨道 ID 为 2nLtzopw4rPReszdYBJU6h:

$.ajax({
   url: 'https://api.spotify.com/v1/audio-features/2nLtzopw4rPReszdYBJU6h',
   headers: {
       'Authorization': 'Bearer ' + 'YOUR_ACCESS_TOKEN'
   },
   success: function(response) {
       console.log(response);
   }
});

从数据库中检索数据实际上取决于您设计数据库的方式以及存储的信息类型，因此它应该非常简单。