lyrics finder
1.0.0
簡介 - 創建一個嚴重依賴一個或多個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請求才能獲取數據。
這些是應用程序可以使用的每個階段 - 以下數字將用於描述[階段]使用每個函數的[階段]以及其領導哪個階段。
在每個階段，還可以通過“清除結果”按鈕或返回按鈕移至上一頁。
歌詞Finder中使用了七個主要功能：
一旦用戶單擊搜索按鈕，就會調用此功能。它檢查了選中單選按鈕的哪個值，並基於此運行相關功能。
為了清除結果容器中可能已經存在的所有數據，在所有以下功能的開頭中調用此功能。
如果在用戶搜索時檢查了歌曲廣播按鈕，則CheckRadio（）調用此功能。該函數向https://api.musixmatch.com/ws/ws/1.1/track.search提出了$ .AJAX請求，其中用戶輸入的值作為參數q_track。如果請求成功，則會創建一個可變跟踪，其中包含返回的曲目列表。這些都是根據MusixMatch的評級系統的流行來排序的。然後，對於此列表的每個項目，將名稱和藝術家輸入index.html的結果容器，以及一個按鈕，該按鈕為用戶提供了一個選項，可以查看所選歌曲的歌詞。通過將TRACK_ID作為參數傳遞到GetLyrics（）函數中，該函數在單擊時觸發。
如果在用戶搜索時檢查了藝術家廣播按鈕，則通過checkradio（）調用此功能。該函數向https://api.musixmatch.com/ws/ws/1.1/artist.search提出了$ .AJAX請求，並將用戶輸入搜索框的值作為q_artist的參數。
如果請求成功，則創建了一個可變的藝術作品，其中包含返回的藝術家列表。這些以基於MusixMatch的評級系統為基礎，以受歡迎程度排序。然後，對於此列表的每個項目，將藝術家輸入index.html的結果容器，以及一個按鈕，該按鈕為用戶提供了一個選項來查看所選藝術家的專輯。這是通過將Artist_ID作為參數傳遞到GetAlbumlist（）函數中的來工作，該函數在單擊時觸發。
此函數與前兩個函數類似。 Artist_ID從GetArtist（）函數傳遞到其中，用於獲取該藝術家的專輯數據。然後將其打印到容器元素中，作為包含每張專輯名稱和一個按鈕的列表，可以選擇查看該專輯的曲目列表。這將在單擊時運行getTrackList（），並將COMPLE_ID作為參數傳遞到該功能中。
專輯_ID已傳遞到此功能中，並用於向https://api.musixmatch.com/ws/ws/ws/ws/album.tracks.get提出請求，以獲取該相冊上的曲目列表。然後，這將返回以查看歌詞的選項的曲目列表，並再次使用一個按鈕（如GetTrack（）中的按鈕。
當單擊歌曲列表中的任何按鈕時，調用此功能。所選歌曲的曲目ID從上一個函數傳遞。該函數使用兩個單獨的AJAX調用。第一個用於從曲目中獲取數據。在API中獲取並從中摘下曲目名稱，以便將其顯示為標題。然後將第二個呼叫撥給Matcher.lyrics.get以自己返回歌詞。如果沒有返回的歌詞，則在容器元素中顯示自定義錯誤消息。
頁面的佈局非常基礎，以使方法保持明顯和簡單。已經使用了深色背景圖像，它在眼睛上柔和，不會引起用戶的注意。配色方案試圖盡可能匹配此圖像，並使用coolors.co創建。數據將在帶有適當標頭的表中返回。
JavaScript代碼是在Jshint上運行的，沒有返回錯誤。 HTML在W3C標記驗證器上運行，沒有返回錯誤。 CSS在W3C CSS驗證器上運行，沒有返回錯誤。
在用戶測試期間，注意到，並非所有穆斯卡特數據庫中的歌曲都有歌詞，因此對於那些在結果中沒有歌詞_body鍵的人添加了自定義錯誤。
創建並運行Assets/js/spec.js，以檢查resetPage（）的功能;該測試成功了。為了確保測試腳本正確，對功能進行了編輯，以在結果容器中包含文本，此時測試失敗了。
在測試時，遇到了一個有趣的問題，其中沒有任何包含雙人物或單語標記的歌曲返回歌詞。在調查中，這個問題似乎是由於試圖將歌曲名稱傳遞到新功能的功能引起的（Getlyrics，在此過程中重命名為returnlyrics），但是當歌曲名稱中出現引號時，它正在閱讀此內容為結尾。參數和錯誤，因為沒有閉合括號。通過編輯Getlyrics來解決這一問題，以便它在單獨的呼叫中檢索歌曲名稱本身，而不是從先前的函數中傳遞。
在任何新功能變化後，測試的每個階段都重新完成。
被測試：
（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頁面上。
