前言
在前端开发中，经常需要与后端 API 进行交互。而对于音乐类应用，大部分都需要使用 Spotify 的 API 进行数据获取和处理。但是，使用原生的浏览器 API 进行操作会有很多麻烦，例如认证、跨域等等。因此，本文介绍了一个 npm 包 plnh-spotify-wrapper，用于简化与 Spotify API 的交互。
安装
在命令行中执行以下命令安装 plnh-spotify-wrapper：
--- ------- -------------------- ------
用途
plnh-spotify-wrapper 提供了以下功能：
- 获取 Spotify 用户信息；
- 获取 Spotify 歌曲信息和歌曲封面图像；
- 获取 Spotify 歌曲播放链接；
- 获取 Spotify 歌单信息和歌单封面图像；
- 获取 Spotify 歌手信息和歌手图片；
- 获取 Spotify 专辑信息和专辑封面图像。
使用方法
认证
在使用前，需要进行认证。首先，需要在 Spotify Developer Dashboard 中创建一个应用程序。创建完成后，会得到一个 Client ID 和一个 Client Secret。
在认证之前，需要先配置一下 Redirect URI。在这里，建议使用 http://localhost:3000 作为 Redirect URI。具体的步骤如下：
- 在应用程序页面中，点击 “Edit Settings” 按钮；
- 在 “Redirect URIs” 中添加 http://localhost:3000；
- 点击 “Save” 按钮。
大多数情况下，我们都是进行客户端认证，即使用 Implicit Grant Flow 进行认证。代码如下：
------ - --------- - ---- ----------------------- -- ------ ----- ----- - - -------------------- ------------------ ------------------------ ------------------------- -------------------------- ------------------- -- -- ---- ----------- ---------- ----------------- ------------- ------------------------ ----- ---------- -- - --------------------- ----------- -- - --------------------- ---
在调用 authorize 函数时，需要传入 client_id、redirect_uri 和 scope 参数。
获取用户信息
要获取用户信息，可以使用 getUser 函数。代码如下：
------ - ------- - ---- ----------------------- ------------------- -- - ------------------ ---------- -- - --------------- ---
获取歌曲信息和歌曲封面图像
要获取歌曲信息和歌曲封面图像，可以使用 getTrack 函数。代码如下：
------ - -------- - ---- ----------------------- --------------------------------------------- -- - ------------------- ---------- -- - --------------- ---
获取歌曲播放链接
要获取歌曲播放链接，可以使用 getTrackUrl 函数。代码如下：
------ - ----------- - ---- ----------------------- ---------------------------------------------- -- - ----------------- ---------- -- - --------------- ---
获取歌单信息和歌单封面图像
要获取歌单信息和歌单封面图像，可以使用 getPlaylist 函数。代码如下：
------ - ----------- - ---- ----------------------- --------------------------------------------------- -- - ---------------------- ---------- -- - --------------- ---
获取歌手信息和歌手图片
要获取歌手信息和歌手图片，可以使用 getArtist 函数。代码如下：
------ - --------- - ---- ----------------------- ----------------------------------------------- -- - -------------------- ---------- -- - --------------- ---
获取专辑信息和专辑封面图像
要获取专辑信息和专辑封面图像，可以使用 getAlbum 函数。代码如下：
------ - -------- - ---- ----------------------- --------------------------------------------- -- - ------------------- ---------- -- - --------------- ---
总结
plnh-spotify-wrapper 提供了一种简单的方式来与 Spotify API 进行交互。通过本文的介绍，读者可以了解到如何使用该库来获取 Spotify 中的信息。同时，本文也解决了与 Spotify API 连接时的认证和跨域问题，避免了这些问题带来的麻烦。
示例代码
本文示例代码可以在 Github Repo 中找到。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60065b47c6eb7e50355dbf1a