lyrics finder

Heather Olcot的歌词Finder

简介 - 创建一个严重依赖一个或多个API的单个页面应用程序。

我选择使用的API是歌词的MusixMatch目录，位于https://www.musixmatch.com/

希望查找特定歌曲歌词的用户可以使用歌词Finder来做到这一点。

用户可以通过艺术家或歌曲搜索，并将其返回结果列表，可以通过该列表来找到所需的歌曲的歌词。

该页面现在在https://hfolcot.github.io/lyrics-finder/

请注意，由于许可，歌词并未完整打印

功能 /技术

一般的

该页面使用Bootstrap 4.0.0，并使用其网格系统和其他样式。

该页面使用Google字体的Nunito Sans和Corben字体以及Fontawesome的图标。

我自己的进一步样式是在资产/css/main.css中完成的

脚本使用jQuery 3.3.1。

使用的API是https://api.musixmatch.com/ws/1.1。返回的数据是JSONP格式，因此需要jQuery Ajax请求才能获取数据。

逻辑

这些是应用程序可以使用的每个阶段 - 以下数字将用于描述[阶段]使用每个函数的[阶段]以及其领导哪个阶段。

在每个阶段，还可以通过“清除结果”按钮或返回按钮移至上一页。

1. 主要的
2. 主>歌曲结果
3. 主>歌曲结果>歌词结果
4. 主要>艺术家结果
5. 主>艺术家结果>专辑结果
6. 主>艺术家结果>专辑结果>歌曲结果
7. 主>艺术家结果>专辑结果>歌曲结果>歌词结果

歌词Finder中使用了七个主要功能：

checkradio（）[1]

一旦用户单击搜索按钮，就会调用此功能。它检查了选中单选按钮的哪个值，并基于此运行相关功能。

resetPage（）[2，3，4，5，6，7]

为了清除结果容器中可能已经存在的所有数据，在所有以下功能的开头中调用此功能。

getTrack（）[1> 2]

如果在用户搜索时检查了歌曲广播按钮，则CheckRadio（）调用此功能。该函数向https://api.musixmatch.com/ws/ws/1.1/track.search提出了$ .AJAX请求，其中用户输入的值作为参数q_track。如果请求成功，则会创建一个可变跟踪，其中包含返回的曲目列表。这些都是根据MusixMatch的评级系统的流行来排序的。然后，对于此列表的每个项目，将名称和艺术家输入index.html的结果容器，以及一个按钮，该按钮为用户提供了一个选项，可以查看所选歌曲的歌词。通过将TRACK_ID作为参数传递到GetLyrics（）函数中，该函数在单击时触发。

GetArtist（）[1> 4]

如果在用户搜索时检查了艺术家广播按钮，则通过checkradio（）调用此功能。该函数向https://api.musixmatch.com/ws/ws/1.1/artist.search提出了$ .AJAX请求，并将用户输入搜索框的值作为q_artist的参数。
如果请求成功，则创建了一个可变的艺术作品，其中包含返回的艺术家列表。这些以基于MusixMatch的评级系统为基础，以受欢迎程度排序。然后，对于此列表的每个项目，将艺术家输入index.html的结果容器，以及一个按钮，该按钮为用户提供了一个选项来查看所选艺术家的专辑。这是通过将Artist_ID作为参数传递到GetAlbumlist（）函数中的来工作，该函数在单击时触发。

getalBumlist（）[4> 5]

此函数与前两个函数类似。 Artist_ID从GetArtist（）函数传递到其中，用于获取该艺术家的专辑数据。然后将其打印到容器元素中，作为包含每张专辑名称和一个按钮的列表，可以选择查看该专辑的曲目列表。这将在单击时运行getTrackList（），并将COMPLE_ID作为参数传递到该功能中。

getTrackList（）[5> 6]

专辑_ID已传递到此功能中，并用于向https://api.musixmatch.com/ws/ws/ws/ws/album.tracks.get提出请求，以获取该相册上的曲目列表。然后，这将返回以查看歌词的选项的曲目列表，并再次使用一个按钮（如GetTrack（）中的按钮。

returnlyrics（）[2> 3和6> 7]

当单击歌曲列表中的任何按钮时，调用此功能。所选歌曲的曲目ID从上一个函数传递。该函数使用两个单独的AJAX调用。第一个用于从曲目中获取数据。在API中获取并从中摘下曲目名称，以便将其显示为标题。然后将第二个呼叫拨给Matcher.lyrics.get以自己返回歌词。如果没有返回的歌词，则在容器元素中显示自定义错误消息。

设计

页面的布局非常基础，以使方法保持明显和简单。已经使用了深色背景图像，它在眼睛上柔和，不会引起用户的注意。配色方案试图尽可能匹配此图像，并使用coolors.co创建。数据将在带有适当标头的表中返回。

测试

JavaScript代码是在Jshint上运行的，没有返回错误。 HTML在W3C标记验证器上运行，没有返回错误。 CSS在W3C CSS验证器上运行，没有返回错误。

在用户测试期间，注意到，并非所有穆斯卡特数据库中的歌曲都有歌词，因此对于那些在结果中没有歌词_body键的人添加了自定义错误。

创建并运行Assets/js/spec.js，以检查resetPage（）的功能;该测试成功了。为了确保测试脚本正确，对功能进行了编辑，以在结果容器中包含文本，此时测试失败了。

在测试时，遇到了一个有趣的问题，其中没有任何包含双人物或单语标记的歌曲返回歌词。在调查中，这个问题似乎是由于试图将歌曲名称传递到新功能的功能引起的（Getlyrics，在此过程中重命名为returnlyrics），但是当歌曲名称中出现引号时，它正在阅读此内容为结尾。参数和错误，因为没有闭合括号。通过编辑Getlyrics来解决这一问题，以便它在单独的呼叫中检索歌曲名称本身，而不是从先前的函数中传递。

在任何新功能变化后，测试的每个阶段都重新完成。

被测试：

1. 主要的
2. 主>歌曲结果
3. 主>歌曲结果>清晰的结果
4. 主>歌曲结果>歌词结果
5. 主>歌曲结果>歌词结果>回去
6. 主>歌曲结果>歌词结果>清晰的结果
7. 主要>艺术家结果
8. 主>艺术家结果>清晰的结果
9. 主>艺术家结果>专辑结果
10. 主>艺术家结果>专辑结果>回去
11. 主>艺术家结果>专辑结果>清晰的结果
12. 主>艺术家结果>专辑结果>歌曲结果
13. 主>艺术家结果>专辑结果>歌曲结果>回去
14. 主>艺术家结果>专辑结果>歌曲结果>清晰的结果
15. 主>艺术家结果>专辑结果>歌曲结果>歌词结果
16. 主>艺术家结果>专辑结果>歌曲结果>歌词结果>回去
17. 主>艺术家结果>专辑结果>歌曲结果>歌词结果>清晰的结果

（x =按预期运行）（o =无法预期的功能）

以下是测试代码是否按预期工作。

浏览器/测试	歌剧	Firefox	铬合金	边缘	野生动物园
1	x	x	x	x	x
2	x	x	x	x	x
3	x	x	x	x	x
4	x	x	x	x	x
5	x	x	x	x	x
6	x	x	x	x	x
7	x	x	x	x	x
8	x	x	x	x	x
9	x	x	x	x	x
10	x	x	x	x	x
11	x	x	x	x	x
12	x	x	x	x	x
13	x	x	x	x	x
14	x	x	x	x	x
15	x	x	x	x	x
16	x	x	x	x	x
17	x	x	x	x	x

以下是测试显示是否按预期工作。

浏览器/测试	歌剧	Firefox	铬合金	边缘	野生动物园
1	x	x	x	x	x
2	x	x	x	x	x
3	x	x	x	x	x
4	x	x	x	x	x
6	x	x	x	x	x
7	x	x	x	x	x
8	x	x	x	x	x
9	x	x	x	x	x
11	x	x	x	x	x
12	x	x	x	x	x
14	x	x	x	x	x
15	x	x	x	x	x
17	x	x	x	x	x

在Microsoft Edge上指出了一个问题，该问题背景图像未正确显示。这是由于脚本元素在HTML代码中的位置。一旦将其移动到身体的末端而不是在头部中，背景图像正确显示。

在iPhone上发现了另一个问题，该问题无法保持固定，并且不会与该页面滚动，从而导致页面“耗尽”后滚动大量返回数据时“耗尽”。研究表明，这是iOS的已知问题。通过使用媒体查询来设置背景以在较小的屏幕上重复的背景来解决。

响应能力

使用Google Chrome开发人员工具来测试应用程序的每个阶段如何在不同的屏幕宽度显示。

x =显示如预期

屏幕宽度/页面显示	Galaxy S5	像素2	像素2xl	iPhone 5/se	iPhone 6/7/8	iPhone 6/7/8 Plus	iPhone X	iPad	iPad Pro
1	x	x	x	x	x	x	x	x	x
2	x	x	x	x	x	x	x	x	x
3	x	x	x	x	x	x	x	x	x
4	x	x	x	x	x	x	x	x	x
6	x	x	x	x	x	x	x	x	x
7	x	x	x	x	x	x	x	x	x
8	x	x	x	x	x	x	x	x	x
9	x	x	x	x	x	x	x	x	x
11	x	x	x	x	x	x	x	x	x
12	x	x	x	x	x	x	x	x	x
14	x	x	x	x	x	x	x	x	x
15	x	x	x	x	x	x	x	x	x
17	x	x	x	x	x	x	x	x	x

部署

该项目是在Cloud9建造的，并推到GitHub，然后在https://hfolcot.github.io/lyrics-finder/上发布在Github页面上。