我的应用程序可让您按心情对音乐进行排序[在Spotify的Web API的帮助下]

我刚刚完成了moooodify网站的工作，该网站可以让您按照不同的心情对喜欢的Spotify音乐进行排序，然后将它们另存为播放列表。

这篇文章将带您轻松地经历我的整个旅程。 无论如何我都不是专业的编码员，所以我在学习过程中大多学到了东西。 好吧，事不宜迟，让我们开始吧。

您可以在此处通过Product Hunt进行查看 。

步骤1：注册我的应用

首先，我在开发人员仪表板上创建了一个帐户。 在那注册我的应用程序后，我得到了一个客户ID，这对于下一步很重要。 我还可以将重定向URI列入白名单。 通过此URI，Spotify身份验证服务可以在用户每次登录时自动重新启动您的应用。

您可以在此处了解有关注册应用程序的更多信息。

步骤2：授权

要让最终用户批准您的应用程序以访问其Spotify数据和功能，或让您的应用程序从Spotify提取数据，我需要授权您的应用程序。

我使用了隐式授予授权方法，如下所示。

这很简单。 我重定向到具有Spotify登录名的URL，发送我从上一步获得的客户ID和相关的权限范围 。

用户登录后，我将获得访问令牌，可用于访问Web API。 要了解有关使用确切命令的更多信息，请参阅《 Spotify授权指南》 。

步骤3：使用Spotify Web API

按心情对歌曲排序

一旦我的应用程序获得授权，我首先会获得用户的热门曲目 ，具体取决于用户所在的标签。 例如，如果用户选择最近6个月的热门曲目，则这是GET请求：

$.ajax({
    url : 'https://api.spotify.com/v1/me/top/tracks?limit=50&time_range=medium_term' ,
    headers : {
        'Authorization' : 'Bearer ' + access_token
    },
    success : function ( response )  {
        getTrackIDs(response);

    },

在上个月或所有时间的情况下，time_range查询分别更改为short_term或long_term。

收到响应后，我将使用曲目ID来获取每个曲目的专辑封面。 为此，我必须得到几张专辑 。 请求是这样的：

function getAlbumArt ( trackIDString ) {
  return $.ajax({
    url : 'https://api.spotify.com/v1/albums?ids=' + encodeURIComponent (trackIDString),
    headers : {
        'Authorization' : 'Bearer ' + access_token
    },
success : function ( response )  {
  setImages();
})
}

然后，我使用响应的images属性将它们存储在数组中。

获得了所有需要显示的信息后，即曲目名称，艺术家姓名和专辑封面，我们现在可以继续将曲目分类为心情并进行显示。 但是，我们需要首先获取每个音轨的音频功能 。 我们在这里也将用于相册的trackIDString用作查询。

 $.ajax({
            url : 'https://api.spotify.com/v1/audio-features?ids=' + encodeURIComponent (trackIDString),
            headers : {
                'Authorization' : 'Bearer ' + access_token
            },
            success : function ( response )  {
                setTrackInfo(response);
            },
            })   

好的！ 现在，我们拥有将歌曲分类为不同心情的一切。 Spotify提供各种音频功能，例如可跳舞性，活力，声学，化合价，速度等。

我以不同的组合使用了其中的几种来提出五种不同的心情：柔和，乐观，冷静，聚会，高能量。

然后，我使用JavaScript的appendChild（）方法将新的曲目信息插入到网站上。

我还创建了一个工具，您可以在其中应用自己的自定义心情，以防您感觉不到任何预先生成的心情。 原理是一样的。 AJAX调用以相同的顺序进行以获取曲目，专辑封面和音频功能。

创建播放列表

歌曲按照心情分类后，用户可以选择将它们另存为播放列表到Spotify。

为此，首先我打电话来获取用户ID 。 我们将需要它来修改他们的播放列表。

$.ajax({
      url : 'https://api.spotify.com/v1/me/' ,
      headers : {
          'Authorization' : 'Bearer ' + access_token
      },
      success : function ( response )  {
          createPlaylist(response);

      }
  })

然后，我们可以使用用户ID为他们创建一个新的播放列表。 为此，我们使用POST请求。

$.ajax({
      type : 'POST' ,
      url : 'https://api.spotify.com/v1/users/' + encodeURIComponent (user.id) + '/playlists' ,
      data : JSON .stringify({
           "name" : playlist-name,
          "description" : playlist-description
       }),
      headers : {
        'Authorization' : 'Bearer ' + access_token,
        'Content-Type' : 'application/json'
      },
      success : function ( response )  {
        addTracks(response);     
      },
      }
    })

这将创建一个空播放列表，其中包含我们选择的名称和说明。 现在我们有了一个播放列表，剩下的唯一事情就是向其中添加曲目。

$.ajax({
        type : 'POST' ,
        url : 'https://api.spotify.com/v1/playlists/' + encodeURIComponent (playlist.id) + '/tracks?uris=' + trackURIString,
        headers : {
          'Authorization' : 'Bearer ' + access_token,
          'Content-Type' : 'application/json'
        },
        success : function ( result )  {
          console .log( 'yay' );
        },
        }
      })

而已！ 用户的Spotify库中将提供一个已填充的播放列表。

学问

这是我第一次使用FTP方法托管网站。 使它具有响应能力，并使它在所有浏览器上都起作用也是一个学习点。 它有时只能在Chrome上运行，有时可以在除Safari之外的所有浏览器上运行，所以这是一个挑战。

JavaScript几乎是全新的。 在此之前，我不了解AJAX调用。 除此之外，我还尝试了CSS关键帧动画，以使网站具有流畅的感觉。

总而言之，这是一次很棒的学习经历。 在设计，编码，设置跟踪，然后发布它的整个流程中，他的洞察力非常高。

亲自尝试该网站！

在Twitter和Medium中找到我。 谢谢阅读！

From: https://hackernoon.com/how-to-use-spotifys-web-api-to-sort-your-music-by-mood-tcfd3qbt