npm 包 SpotifyCurrentlyPlaying.js 使用教程

阅读时长 6 分钟读完

简介

SpotifyCurrentlyPlaying.js 是一个可用于网页端的 npm 包,它提供了获取 Spotify 用户正在播放的歌曲信息的功能,这个包的主要用途是在网页端的音乐播放器中获取当前使用 Spotify 的用户正在播放的歌曲信息。

安装

通过以下命令可以安装 SpotifyCurrentlyPlaying.js:

使用

在使用 SpotifyCurrentlyPlaying.js 之前,你需要先获取到一个 Spotify Developer API 的 token,可以通过下面的链接进行获取:

https://developer.spotify.com/console/get-users-currently-playing-track/

获取到 token 后就可以在代码中调用该 npm 包的 API 方法,示例代码如下:

API

SpotifyCurrentlyPlaying.js 包含以下 1 个 API 方法:

getTrackInfo

  • 访问 Spotify Developer API 获取当前用户正在播放的歌曲信息。
  • token - 由 Spotify Developer API 提供的 token。
  • 返回 Promise 对象,成功时返回一个 Object,包含以下信息:
属性 类型 描述
albumName String 当前播放歌曲的专辑名称
artistName String 当前播放歌曲的艺术家名称
albumArtUrl URL 当前播放歌曲的专辑封面图片的链接
trackName String 当前正在播放的歌曲名称
albumArtWidth Integer: pixels 当前播放歌曲的专辑封面图片的宽度
albumArtHeight Integer: pixels 当前播放歌曲的专辑封面图片的高度
trackDurationMillis Integer: millis 当前播放歌曲的总时长(以毫秒为单位)

如果出现错误,则会返回一个 Error 对象。

示例

下面是一个基于 React 和 SpotifyCurrentlyPlaying.js 的音乐播放器的示例代码,用于展示如何在网页端借助该 npm 包获取正在播放的歌曲信息。

-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ --------- ---- ----------------------------

----- ----------- ------- --------- -
  ------------------ -
    -------------

    ---------- - -
      ------------ ---
      ----------- ---
      ---------- --
    -
  -

  ------------------- -
    -- -- -----
    ----- ----- - --------------------------------------

    -- ------- -
      -- -- --- -----------
      ---------------------------------------------- -- -
        ---------------
          ------------ ----------------------
          ----------- ---------------------
          ---------- -------------------
        ---
      ---------------- -- -
        ---------------------
      ---
    -
  -

  -------- -
    ------ -
      ---- -------------------------
        ---- ---------------------------- -------------------------- --
        -----------------------------
        ------------------------------
      ------
    --
  -
-

------ ------- ------------

总结

通过本篇文章的阅读,我们了解了如何使用 npm 包 SpotifyCurrentlyPlaying.js 获取 Spotify 用户正在播放的歌曲信息,同时还通过示例代码展示了如何在网页端借助该 npm 包实现基础的音乐播放器功能。希望这篇文章能对读者对前端类 npm 包的使用有所启发。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/600670a58ccae46eb111f1ae

纠错
反馈