Goear 是一款流行的在线音乐播放器，它提供了各种音乐资源。npm 包 goear_api 可以用来获取 Goear 上的音乐信息，并将信息呈现在前端页面上。在这篇文章中，我们将深入介绍如何在前端中使用 goear_api。
安装 goear_api
要使用 goear_api，首先需要安装它。打开终端，执行以下命令：
--- ------- ---------
这将自动安装 goear_api 并保存依赖项。我们也可以将 goear_api 添加到 package.json 文件中，以确保每次安装应用程序时都会将其安装为依赖项。
使用 goear_api
要使用 goear_api，我们需要先导入它。在你的 JavaScript 文件中添加以下代码：
----- ----- - ---------------------
现在我们可以使用 goear_api 提供的功能了。
搜索音乐
要搜索 goear 上的音乐，我们可以使用 search() 函数。例如，要搜索名为“Let It Be”的歌曲，我们可以这样做：
----------------- -- ------------------ -- - -------------------- ---
search() 函数将返回一个 Promise，解析为一个包含与搜索词匹配的歌曲列表的数组。每个歌曲都包含以下信息：
- id: 歌曲 ID
- title: 歌曲标题
- artist: 艺术家名
- cover: 歌曲封面的 URL
- duration: 歌曲长度的秒数
获取歌曲详情
一旦我们从搜索结果中找到感兴趣的歌曲，我们可以使用 getSong() 函数来获取它的详情。例如：
----------------------------------- -- - ------------------ ---
getSong() 函数将解析为一个包含以下信息的对象：
- id: 歌曲 ID
- title: 歌曲标题
- artist: 艺术家名
- cover: 歌曲封面的 URL
- url: 歌曲的播放 URL
- duration: 歌曲长度的秒数
将歌曲列表呈现在前端页面上
要呈现 goear 上的歌曲列表，我们可以在前端使用任何可用于渲染计划的框架，如 Vue 或 React。以下代码使用 Vue 渲染歌曲列表。
----------
-----
----
--- ----------- -- ------ ---------------
---- ------------------ ------------------------
---- ----------------
------ ---------- -------
----- ----------- ------
----- ------------- -- -----------
------
-----
-----
------
-----------
--------
------ ----- ---- ------------
------ ------- -
------ -
------ -
------ ---
--
--
----- --------- -
----- ------------- - ----- ----------------- -- -----
---------- - -------------------------- -- --
--- ----------
------ -------------
------- --------------
------ -------------
--------- ----------------
----
--
--
---------当我们访问页面时，它将显示 Goear 上与“Let It Be”匹配的所有歌曲的信息。
总结
在本文中，我们深入了解了如何在前端使用 Goear Api 搜索和获取音乐信息。我们展示了如何使用搜索功能，并在前端呈现歌曲列表。使用 goear_api，我们可以在我们的应用程序中轻松地集成 Goear 的资源。
示例代码：https://github.com/Gaurang98671/goear_api_example/tree/main
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066e84255dee6beeee753b