從一個簡單的音樂播放器，居然要用到這麼些東西？

前幾天寫了一個簡易的音樂播放器,也收到了你們的一些反饋。最大的問題就是老是資源失效，針對這一點昨天我進行了一次重寫，也把重構過程當中的一些知識點和心得記錄下來與你們一塊兒分享。 沒怎麼寫過文章，語句不通或者錯誤地方也請你們指出，我多多改正。項目地址

下面開始進入正題

如今已經有不少基於binaryify大佬的網易雲API的web音樂播放器。界面都很美觀體驗也不錯，可是在你們在使用時仍是官方的。

寫這個項目的初衷是由於忽然想聽周杰倫的歌了，而後去網上一搜，試聽都要收費了，而後再油猴的市場裏翻到了一個能免費聽歌曲的在線工具，這段時間也比較喜歡用node，因此就在摸魚時，用 puppeteer把周杰倫全部的歌曲地址都整理下來了，而後寫成了一個簡單的網頁播放器。而且發了一個沸點，收到了你們不少的評論和點贊，github上面也出現了我人生中的第一次星星，同時也收到了不少反饋，其中最嚴重的是歌曲失效問題。

第一次解決失效問題

在查找失效緣由時，發現了整理的歌曲地址中存在一個有時效性的key，應該就是爲了防止我這種人作的處理。解決辦法是，我寫了一個定時任務，每隔三個小時從新去拉取一次列表。同時將GitHub的體驗地址重定向到了個人博客中，使用的是我本身的服務器資源。個人服務器配置很低，3個小時也是爲了節省一些資源。
可是，依然會出現間隔性失效的問題。

第二次解決失效問題

此次換了個思路，既然訪問源地址有時效性，那麼我就直接了當的把全部的歌曲都下載下來，一勞永逸。怎麼下載呢，確定不是手動，手動是沒有靈魂的。而後仍是node，使用了node 的 request模塊。因而引出了小知識點，同時下載394個文件？確定不行啊，因而手動實現了一個下載隊列的函數，能夠自定義同時下載多少個任務數。函數已經寫好了，源碼或者文章都有。 ... 下載完以後又來了一個問題，我存哪裏呢？放本身服務器，不可能的。因而選擇了七牛雲來作儲存。get一個小知識點，文件上傳七牛雲。 至此，不再用擔憂歌曲鏈接失效的問題了，除非唱片公司告我侵權，我給所有刪了。。。

關於UI和功能新增的問題

這個項目很是簡單，主要是node的知識運用。前端方面只有一個簡單的html頁面。UI也很難看。若是你們有興趣能夠本身來修改擴展。

一個小槽點

個人node代碼裏不少地方沒有加 ; 你們不要學我，在寫node的時候最好把;加上哈。尤爲在require()後

第一次寫這麼多話，個人表達能力不好，若是看不懂我說的，能夠移步GitHub直接查看源碼。就說這麼這麼多了，溜了溜了。另外我這裏招前端開發，1年經驗起步。不要實習，座標河北廊坊。個人微信在文章最後。

一個下載隊列函數

前兩天寫的那個在線播放周杰倫全部歌曲的小項目，由於老是歌曲地址失效，因此準備把歌曲所有下載下來。放到七牛或者其餘的雲進行儲存。
一共是394條數據，同時下載確定不行的，因此本身手動寫了一個下載的方法，只容許最多同時下載5首歌曲。最後封裝成了一個通用的方法而且與你們一塊兒交流分享。

/** * 下載隊列 * @param {Number} max @default 5 -最大並行下載數 * @param {Array} list -下載列表 * * state not : 未下載; loading : 下載中; done : 下載完成 * */
function downloadQueue(list, max) {
    for (let i of list) {
        i.state = 'not'
    }
    // 是否下載完成
    let allDone = false

    const down = () => {
        let noIndex = null
        let notDownload = null

        for (let i = 0; i < list.length; i++) {
            const item = list[i]
            if (item.state === 'not') {
                notDownload = item
                noIndex = i
                break
            }
        }

        if (!notDownload) {
            console.log('所有下載完畢')
            allDone = true
            return
        }

        const downLoadings = list.filter(item => item.state === 'loading')
        if (downLoadings.length >= max) {
            return
        }
        notDownload.state = 'loading'
        console.log(`下載第 ${noIndex} 個`)
        down()
        setTimeout(() => {
            console.log(`下載第 ${noIndex} 個完成`)
            console.log(`剩餘 ${list.length} 個`)

            list[noIndex].state = 'done'
            if (allDone) {
                return
            }
            down()
        }, 300)
    }
    down()
}
複製代碼