在Spotify API Javascript +添加到服务器中搜索曲目

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

我目前正试图实施Spotify搜索功能。 他们的文档不是很全面,我几乎不是初学者。

  • 我希望能够在搜索(播放按钮,曲目标题,艺术家或专辑)中输入任何内容,获取结果列表并将其显示在我的网站上的表格中(标题,艺术家,专辑,专辑封面,期限,等等..)。 我不知道Spotify API上的哪些功能可以用来实现这一点。

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


  • 这是一个获取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步:获取访问令牌

    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);
       }
    });
    

    从数据库中检索数据取决于您如何设计数据库以及存储什么样的信息,因此它应该非常简单。

    链接地址: http://www.djcxy.com/p/55639.html

    上一篇: Search for track in Spotify API Javascript + Add to Server

    下一篇: Spotify: get all songs and saved album