music.html

 

<!-- <link href="https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.css" rel="stylesheet"> -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css">
<!-- <script src="https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>



<div class="change_playlist" id="div1">
    <div class="subdiv" id="subdiv1">网易云playlist id: </div>
    <div class="subdiv" id="subdiv2" contenteditable="plaintext-only"  >119920417</div>
    <div class="subdiv" id="subdiv3"   onClick="showplaylist()"  />change play list</div>

<!--    网易云playlist id: <input id="playlist" value='82292832' ><input id="nodeGoto" type="button"   onClick="showplaylist()"  value = 'change playlist'  />-->
</div>
<div id="player1" class="aplayer"></div>

<div>
    <h>推荐的网易云playlist</h>
    <li>119920417</li>
    <li>327073149</li>
    <li>82292832</li>
    <li>2215356763</li>

</div>
 

<style type="text/css">
    .change_playlist{
        display: flex;
        text-align: center;
        vertical-align: center;
        height: 100px;
        justify-content:center;
        width: 70%;



    }

    .subdiv{

        height: 40px;
        line-height: 40px;
        text-align: center;
        align-self: center;
    }

    #subdiv1{
        flex: 3;
        align-self: center;

    }
    #subdiv2{
        flex: 3;
        align-self: center;
        font-size: 16px;
        border: solid 1px #b7daff;
    }
    #subdiv3{
        align-self: center;
        flex: 2;
        text-align: left;
        background-color: black;
        color: white;
        display: block;

        text-decoration: none;
        width: 10px;
        background: #b7daff;
        border: solid 2px #b7daff;
        cursor: pointer;
    }


</style>



<script>

    document.getElementById("subdiv2").addEventListener("keypress", function(e) {
        // console.log(e);
        if (e.code == 'Enter'){
            e.preventDefault();
            showplaylist();
        }

    }, false);

</script>


<script type="text/javascript">

    const  url_pre = "https://y-cloud-music-api.herokuapp.com/"


    function downloadrul(id){
        // id = '5255987'
        // var url = url_pre + 'url/' + id
        var url = url_pre + 'song/url?id=' + id
        return axios.get(url)
    }


    function downloadlry(id){
        // var url = url_pre + 'lyric/' + id
        var url = url_pre + 'lyric?id=' + id
        return(axios.get(url))
    }


    function downloadname(id){
        // var url = url_pre + 'detail/' + id
        var url = url_pre + 'song/detail?ids=' + id
        return(axios.get(url))

    }

    async function downloadplaylist(id){
        // var url =  "https://api.imjad.cn/cloudmusic/?type=playlist&id=" +  id;
        var url = url_pre + 'playlist/detail?id=' + id;
        res = await  axios.get(url);
        res = res.data ;

        id_list=[]

        for (ii in res.playlist.tracks){
            id_list.push(res.playlist.tracks[ii].id.toString());
        }
        return(id_list) ;
    }
    async function loadplaylist(arr){
        // '2215356763'

        details = []
        lrcs =[]
        urls = []

        for(i in arr){

            var detail = downloadname(arr[i]);
            var lrc = downloadlry(arr[i]);
            var url = downloadrul(arr[i])

            details.push(detail);
            lrcs.push(lrc);
            urls.push(url);
        }

        details = await Promise.all(details)
        lrcs = await Promise.all(lrcs)
        urls = await Promise.all(urls)

        res = []

        len = urls.length
        for(let i=0;i<len;i++){
            try{
                if("lyric" in lrcs[i].data.lrc == false){
                    lrc = 'None';
                }
                else{
                    lrc = lrcs[i].data.lrc.lyric;
                }

            }
            catch (e) {
                lrc='None'
            }
            if (urls[i].data.data[0].url == null){
                continue
            }

            tmp = {
                name:details[i].data.songs[0].name,
                artist: details[i].data.songs[0].ar[0].name,
                url: urls[i].data.data[0].url,
                cover:  details[i].data.songs[0].al.picUrl,
                lrc: lrc
            }
            res.push(tmp)
        }
        return(res)
    }

</script>

<script type="text/javascript">

    async function showplaylist(){
        var input = document.getElementById("subdiv2");
        var playlist =   downloadplaylist(input.textContent);
        playlist = await playlist;
        var first_song = await  loadplaylist([playlist[0]]) ;
        // console.log(first_song)
        var ap = new APlayer({
            container: document.getElementById('player1'),
            lrcType: 1,
            fixed: false,
            audio: first_song,
        });
        ap.play();
        var rest_songs =  await  loadplaylist(playlist.slice(1)) ;
        // console.log(rest_songs)
        ap.list.add(rest_songs);

    };
    showplaylist();

</script>