npm 包 netease-cloud-music 使用教程

AI 编程助手,豆包旗下的编程助手,提供智能补全、智能预测、智能问答等能力,节省开发时间,释放脑海中的创造力,支持 VSCode,点击体验 AI

在前端开发中,网络音乐播放器是一种常见的需求,而网易云音乐自然也是非常受欢迎的音乐平台之一。为了方便开发人员使用网易云音乐的 API,社区中出现了许多封装好的 npm 包,其中 netease-cloud-music 就是其中一种,本文将介绍如何使用它。

安装

你可以通过 npm 直接安装 netease-cloud-music,方法如下:

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

安装好之后,通过 require 或 import 的方式即可引入:

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

现在,你已经成功引入 netease-cloud-music,接下来让我们看看如何具体使用它。

登录

虽然可以直接访问网易云音乐的 API,但是很多操作需要登录才能进行,因此,首先我们需要登录。

使用 netease-cloud-music,我们可以通过如下方式进行登录:

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

这里我们使用了 loginByPhone 进行登录,可以看出,我们需要提供手机号和密码。当登录成功后,会返回如下格式的数据:

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

其中 profile 是用户个人资料,account 是用户账户信息。

搜索音乐

登录后,我们就可以使用搜索功能了。使用 search 函数进行搜索,方法如下:

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

search 函数返回的是一个 Promise,其中可以提供搜索的关键字,搜索结果会返回如下格式的数据:

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

其中,result 数组中的每个元素都代表了一首歌,包含了歌曲的 id、歌曲名和演唱者信息等。

获取歌词

我们也可以通过 netease-cloud-music 获取歌曲的歌词。方法如下:

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

getLyric 函数返回的是一个 Promise,其中提供的是歌曲的 id,可以获取到歌曲的歌词,返回的格式如下:

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

需要注意的是,由于版权问题,有些歌曲是没有歌词的。

获取歌曲 URL

最后,我们也可以使用 netease-cloud-music 获取播放歌曲的 URL。方法如下:

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

getSongUrl 函数也返回的是一个 Promise,其中提供的是歌曲的 id,可以获取到歌曲的 URL,返回的格式如下:

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

在获取到歌曲的 URL 后,我们就可以通过 audio 标签进行播放了。

总结

本文介绍了使用 netease-cloud-music 进行登录、搜索、获取歌词和获取歌曲 URL 等操作的方法。使用 netease-cloud-music,我们可以在前端应用中方便地使用网易云音乐的 API,为实现音乐播放功能提供了便利。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/60055d2581e8991b448dadd5


猜你喜欢

  • npm 包 @ag-components-react/my-link-layout 使用教程

    概述 @ag-components-react/my-link-layout 是一个 React 组件库的 npm 包。它提供一个可配置的链接排版布局组件,可以通过传递参数来设置链接的样式、排版和点击...

    2 年前
  • npm 包 lazy-eval-array 使用教程

    在前端开发中,我们经常需要处理大量的数据。而 lazy-eval-array 这个 npm 包能够帮助我们解决数组操作的性能问题,使处理数据更加快速、高效。 什么是 lazy-eval-array? ...

    2 年前
  • npm 包 redux-dialog-extended 使用教程

    简介 redux-dialog-extended 是一个可以让你很方便地在 React 应用中集成对话框功能的 npm 包。它包含了一些常见的对话框类型,比如确认框和输入框,并支持自定义对话框内容和样...

    2 年前
  • npm 包 react-native-zindex-views 使用教程

    在 React Native 开发中,我们可以通过 z-index 来改变元素的层级关系,从而影响元素的显示顺序。但是,原生 React Native 并没有提供直接修改 z-index 的方法,因此...

    2 年前
  • npm 包 transmission-client 使用教程

    简介 transmission-client 是一个用于操作 Transmission BitTorrent 客户端 API 的 npm 包。它可以用于从 JavaScript 代码中发送指令到 Tr...

    2 年前
  • NPM包Request-Text使用教程

    在前端开发过程中,经常需要通过HTTP请求从服务器获取数据。NPM包Request-Text是一个简单易用的工具,它可以轻松地帮助我们完成HTTP请求,获取服务器返回的数据。

    2 年前
  • npm 包 chargebee-to-csv 使用教程

    背景介绍 在前端开发中,经常需要进行数据的处理和转换。而 Chargebee 是一个流行的订阅管理平台,常常需要将其中的数据导出并转换为 csv 格式,以供后续的分析和使用。

    2 年前
  • npm 包 minimize-powell 使用教程

    简介 minimize-powell 是一个优化 JavaScript 函数的 npm 包。它的原理是使用 Powell 的最小化算法来找到函数的最小值。它可以用于处理各种函数,包括曲线拟合和误差函数...

    2 年前
  • npm 包 ng2-bwired-materialize 使用教程

    想要在 Angular 应用中使用 MaterializeCSS,我们可以使用 ng2-bwired-materialize 这个 npm 包,它提供了一套 Angular 组件来包装 Materia...

    2 年前
  • npm 包 tr-samlp 使用教程

    在前端开发中,我们经常需要在不同的应用程序之间共享数据。通常,我们使用基于浏览器的 Cookie 和 Session 等机制来实现这个目标。然而,这个方法存在一些限制,比如 Cookie 有大小限制问...

    2 年前
  • npm 包 routes-standalone 使用教程

    在前端开发中,路由是一个非常重要的概念。对于单页应用程序(SPA)而言,路由是至关重要的组成部分。它可以让用户在应用程序中进行无缝的导航,而不必担心页面重新加载或应用程序的状态丢失。

    2 年前
  • npm 包 config-merge-loader 使用教程

    作为前端工程师,我们都知道配置文件在多个项目中非常常见。然而,当我们需要在多个不同项目之间来回切换时,手动修改配置文件显然十分麻烦。因此,我们需要一种自动化的方式来管理我们的配置。

    2 年前
  • npm 包 static-version-injection-html-webpack-plugin 使用教程

    在前端开发中,静态资源的缓存策略是一个非常重要的话题。一种常见的做法是为资源文件添加一个版本号,当文件内容发生变化时,版本号也会随之改变,这样浏览器就能够获取到最新的版本,而不需要从缓存中读取旧的文件...

    2 年前
  • npm 包 node-env-man 使用教程

    前言 node-env-man 是一个帮助前端开发人员管理环境变量的 npm 包,它可以让你在开发和部署阶段轻松管理不同的环境变量,提高代码的可维护性。本文将为您介绍如何使用 node-env-man...

    2 年前
  • NPM包Unfiltered-FAQ使用教程

    简介 NPM,即Node Package Manager,是Node.js的包管理器,通过它,我们可以方便地管理和使用第三方模块。而Unfiltered-FAQ就是一个基于Node.js的NPM包,它...

    2 年前
  • npm 包 @richnologies/foscam 使用教程

    简介 @richnologies/foscam 是一个用于控制 Foscam IP 摄像头的 npm 包。它提供了一系列 API,让开发者可以通过代码来控制摄像头,例如获取视频流、控制云台转动等等。

    2 年前
  • NPM 包 env-helper 使用教程

    在前端开发中,我们经常需要在不同的环境中运行同一份代码。比如,我们在本地调试时会使用开发环境,而在服务器上部署时会使用生产环境。这时就需要处理不同环境中的环境变量,以确保应用程序能够正常运行。

    2 年前
  • npm 包 dynamic-bit-array 使用教程

    当我们需要在前端开发中对一些数据进行位操作的时候,我们可能会需要使用到 dynamic-bit-array 这个 npm 包来帮助我们进行高效的位操作。本文主要介绍如何使用该 npm 包来优化我们的项...

    2 年前
  • npm 包 mk-template-list 使用教程

    简介 在前端开发中,使用模板可以提高开发效率,减少重复代码的编写。常见的一些框架或者脚手架都提供了基础的模板,但有时候我们需要自定义一些特定的模板来适应项目的需要。

    2 年前
  • npm 包 reapop-theme-shophobe 使用教程

    前言 在前端开发中,我们经常需要使用各种 npm 包来辅助我们完成业务需求。其中,reapop-theme-shophobe 是一个非常实用的 npm 包,它提供了一套美观的通知消息主题,在项目中可以...

    2 年前

相关推荐

    暂无文章