網易雲歌曲下載

阿新 • • 發佈：2021-02-19

技術標籤：前端

前期準備
1.所下載歌曲需網易雲音樂有版權播放；
2.由於未找到歌曲搜尋相關API，故歌曲ID由網易雲音樂位址列獲取。
相關程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>網易雲音樂下載</title>
</head>

<style>
    * {
        padding: 0;
        margin: 0;
        list-style: none;
        text-decoration: none;
    }

    .box {
        width: 500px;
        height: 600px;
        margin: 50px auto;
        border: 1px solid red;
        background: #c9c9c9;
    }

    .box1 {
        border-bottom: 1px solid red;
    }

    .search {
        width: 360px;
        height: 40px;
        margin: 20px auto;
        text-align: center;
        line-height: 40px;
    }

    .search > input {
        float: left;
        height: 30px;
        margin-top: 3px;
        outline: none;
        opacity: 0.5;
    }

    .search > input:first-child {
        margin-left: 20px;
        margin-right: 10px;
        padding-left: 10px;
        width: 180px;
    }

    .search > input:nth-child(2) {
        width: 70px;
        margin-right: 10px;
    }

    #audio {
        margin-top: 60px;
        margin-left: 80px;
        outline: none;
        opacity: 0.5;
    }

    #ul {
        color: red;
        margin-top: 140px;
        text-align: center;
    }

    #ul > li {
        line-height: 25px;
        font-weight: 900;
    }

</style>

<body>
<div class="box" id="box">
    <div class="box1">
        <div class="search">
            <input id="txt" type="text" title="search" placeholder="請輸入想要下載的歌曲ID">
            <input id="sub" type="submit" title="submit" value="搜素">
        </div>
    </div>
    <audio id="audio" controls></audio>
    <ul id="ul"></ul>
</div>

<script type="text/javascript">
    let box = document.getElementById('box');
    let txt = document.getElementById('txt');
    let sub = document.getElementById('sub');
    let audio = document.getElementById('audio');
    let ul = document.getElementById('ul');
    let detail = "";    //  歌曲資訊

    /*  點選搜尋歌曲  */
    sub.onclick = function () {
        audio.pause();  //  暫停播放音樂
        if (txt.value === '') {
            alert('歌曲ID不能為空');
        } else {
            getDetail();
            getSong();
        }
    };

    /*  獲取歌曲播放地址  */
    function getSong() {
        let xhr = new XMLHttpRequest();
        xhr.open('get', 'https://api.imjad.cn/cloudmusic/?type=song&id=' + txt.value);
        xhr.send();
        xhr.onreadystatechange = function () {
            if (xhr.status === 200 && xhr.readyState === 4) {
                let url = JSON.parse(xhr.response);
                if (url.data[0].url === '') {
                    alert('搜尋的歌曲ID不存在');
                } else {
                    console.log(url.data[0].url);
                    audio.setAttribute("src", url.data[0].url);
                    playNum();
                }
            }
        }
    }

    /*  獲取歌曲資訊(歌曲名稱,歌手,專輯名,專輯圖片等資訊)  */
    function getDetail() {
        detail = "";
        let xhr1 = new XMLHttpRequest();
        xhr1.open('get', 'https://api.imjad.cn/cloudmusic/?type=detail&id=' + txt.value);
        xhr1.send();
        xhr1.onreadystatechange = function () {
            if (xhr1.status === 200 && xhr1.readyState === 4) {
                let url1 = JSON.parse(xhr1.response);
                if (url1.privileges[0].chargeInfoList !== null) {
                    detail += '<li>單曲: ' + url1.songs[0].name + '</li><li>第一歌手: ' + url1.songs[0].ar[0].name + '</li><li>所屬專輯: ' + url1.songs[0].al.name + '</li>';
                    box.style.background = "url(" + url1.songs[0].al.picUrl + ")";
                    box.style.backgroundSize = "100% 100%";
                    ul.innerHTML = detail;
                }
            }
        }
    }

    /*  控制播放次數(修改time的值進行控制)  */
    function playNum() {
        let start = 0;
        let times = 1;
        audio.addEventListener("stopSong", function () {
            audio.play();
            start++;
            if (start === times) {
                audio.pause();
            }
        });
        audio.play();
    }

</script>
</body>
</html>