master

分支 (2)

管理

管理

master

Android

netease-cloud-music
/
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网易云音乐</title>
    <link rel="shortcut icon" href="./images/voice.png">
    <link rel="stylesheet" href="./css/swiper.css">
    <link rel="stylesheet" href="./css/index.css">
    <!-- 首页5项菜单与首页的推荐歌单样式 -->
    <link rel="stylesheet" href="./css/home.css">
    <!-- 歌单详情界面样式 -->
    <link rel="stylesheet" href="./css/song_pager.css">
    <!-- 播放界面样式 -->
    <link rel="stylesheet" href="./css/music_pager.css">
    <!-- 搜索音乐界面样式 -->
    <link rel="stylesheet" href="./css/search_pager.css">

</head>

<body>
    <div class="main_box">
        <audio src=""></audio>
        <!-- 首页界面 -->
        <div class="home_box">
            <!-- 顶部导航栏 -->
            <header>
                <img class="menu" src="./images/menu.png">
                <div class="search_box">
                    <svg t="1699095105613" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2313" width="200" height="200">
                        <path d="M448 768c176.725333 0 320-143.274667 320-320 0-176.725333-143.274667-320-320-320-176.725333 0-320 143.274667-320 320 0 176.725333 143.274667 320 320 320z m0 42.666667c-200.298667 0-362.666667-162.368-362.666667-362.666667S247.701333 85.333333 448 85.333333s362.666667 162.368 362.666667 362.666667-162.368 362.666667-362.666667 362.666667z m304.917333-27.584a21.333333 21.333333 0 0 1 30.165334-30.165334l150.848 150.848a21.333333 21.333333 0 0 1-30.165334 30.165334l-150.848-150.826667z" fill="#cdcdcd" p-id="2314"></path>
                    </svg>
                    <!-- <input class="search_ipt" placeholder="搜索音乐" type="text"> -->
                    <div class="search_ipt"> 搜索音乐</div>
                </div>
                <img class="record" src="./images/voice.png">
            </header>
            <!-- 顶部导航栏End -->

            <!-- 底部播放盒子 -->
            <div class="footer_play">
                <img src="./images/72d9854940be46579f098b49f9d9035c.jpg" alt="">
                <p class="fp_name">大雾</p>
                <img src="./images/stop_in.png" alt="" class="play_stop">
            </div>
            <!-- 底部播放盒子End -->

            <!-- 轮播图 -->
            <div class="swiper mySwiper">
                <div class="swiper-wrapper"></div>
                <div class="swiper-pagination"></div>
            </div>
            <!-- 轮播图End -->

            <!-- 5项菜单 -->
            <div class="tabcat">
                <div><img src="./images/date.png" alt="">
                    <p>每日推荐</p>
                </div>
                <div><img src="./images/radio.png" alt="">
                    <p>私人漫游</p>
                </div>
                <div><img src="./images/audio.png" alt="">
                    <p>歌单</p>
                </div>
                <div><img src="./images/phb.png" alt="">
                    <p>排行榜</p>
                </div>
                <div><img src="./images/book.png" alt="">
                    <p>有声书</p>
                </div>
            </div>
            <!-- 5项菜单End -->

            <!-- 推荐歌单 -->
            <div class="song_link">推荐歌单 ></div>
            <div class="reco_song_list"></div>
            <!-- 推荐歌单End -->

        </div>
        <!-- 首页界面End -->

        <!-- 歌单详情 -->
        <div class="soud_list">
            <div class="soud_heard">
                <div class="sh_top">
                    <img src="./images/left.png" alt="" class="sh_back">
                    <p>官方推荐歌单</p>
                </div>
                <div class="sh_content">
                    <img src="./images/72d9854940be46579f098b49f9d9035c.jpg" alt="">
                    <p>【日系】献给一个“你未邂逅一个女生”</p>
                </div>
            </div>
            <div class="all_list">
                <div class="al_top">
                    <img src="./images/24gf-playCircle.png" alt="">
                    <h4>播放全部</h4>
                    <p>(36)</p>
                </div>
                <div class="al_sond_list"></div>
            </div>
        </div>
        <!-- 歌单详情End -->

        <!-- 音乐播放界面 -->
        <div class="music_pager">
            <div class="msp_heard">
                <img src="./images/下箭头.png" alt="">
                <div class="msp_chlid">
                    <h4>For Me</h4>
                    <p>THe CHARM PARK</p>
                </div>
                <img src="./images/分享.png" alt="">
            </div>
            <!-- 碟片部分 -->
            <div class="msp_first">
                <div class="mspf_box1">
                    <div class="msp_play_box">
                        <img src="./images/72d9854940be46579f098b49f9d9035c.jpg" alt="">
                    </div>
                    <div class="msp_icons_box">
                        <img src="./images/喜欢.png" alt="">
                        <img src="./images/下载.png" alt="">
                        <img src="./images/消息.png" alt="">
                        <img src="./images/右侧菜单.png" alt="">
                    </div>
                </div>
                <!-- 歌词 -->
                <div class="mspf_box2">
                    <div class="lrc_box"></div>
                </div>
                <!-- 歌词End -->
            </div>

            <div class="scroll_box">
                <p class="start_time">00:00</p>
                <div class="progress">
                    <div class="pro_line"></div>
                </div>
                <p class="end_time">00:00</p>
            </div>
            <div class="operate_music">
                <img src="./images/24gl-repeat2.png" alt="">
                <img src="./images/上一首.png" alt="">
                <img src="./images/stop_in.png" alt="">
                <img src="./images/下一首.png" alt="">
                <img src="./images/歌单.png" alt="">
            </div>
        </div>
        <!-- 音乐播放界面End -->

        <!-- 搜索界面 -->
        <div class="search_pager">
            <header class="sep_hot">
                <img src="./images/system_back.png" alt="">
                <div class="sep_border">
                    <svg t="1699095105613" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2313" width="200" height="200">
                        <path d="M448 768c176.725333 0 320-143.274667 320-320 0-176.725333-143.274667-320-320-320-176.725333 0-320 143.274667-320 320 0 176.725333 143.274667 320 320 320z m0 42.666667c-200.298667 0-362.666667-162.368-362.666667-362.666667S247.701333 85.333333 448 85.333333s362.666667 162.368 362.666667 362.666667-162.368 362.666667-362.666667 362.666667z m304.917333-27.584a21.333333 21.333333 0 0 1 30.165334-30.165334l150.848 150.848a21.333333 21.333333 0 0 1-30.165334 30.165334l-150.848-150.826667z" fill="#cdcdcd" p-id="2314"></path>
                    </svg>
                    <input type="text" placeholder="搜索音乐">
                </div>
                <div class="sep_enter">搜索</div>
            </header>

            <div class="list_hotword">
                <div class="hot_word"></div>
                <div class="search_sond_list"></div>
            </div>
        </div>
        <!-- 搜索界面End -->

        <!-- 播放列表 -->
        <div class="mask">
            <div class="playList">
                <h3>当前播放</h3>
                <ul></ul>
            </div>
        </div>

        <!-- 侧边栏 -->
        <div class="sidebar_mask">
            <div class="sidebar"></div>
        </div>


    </div>

</body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="./js/config.js"></script>
<script>
    const audio = document.querySelector('audio');
    const sh_back = document.querySelector('.sh_back');
    const end_time = document.querySelector('.end_time');//歌曲结束的时间
    const pro_line = document.querySelector('.pro_line');//歌词进度条
    const soud_list = document.querySelector('.soud_list');
    const start_time = document.querySelector('.start_time');//歌曲开始的时间
    const search_ipt = document.querySelector('.search_ipt');//输入框
    const search_enter = document.querySelector('.sep_enter');//开始搜索
    const footer_play = document.querySelector('.footer_play');//底部播放状态盒子
    const music_pager = document.querySelector('.music_pager');
    const al_sond_list = document.querySelector('.al_sond_list');
    const search_page_back = document.querySelector('.sep_hot>img');//搜索音乐界面返回按钮
    const reco_song_list = document.querySelector('.reco_song_list');
    const search_sond_list = document.querySelector('.search_sond_list');//渲染搜索到的列表

    let songsList = [];
    let misList = []
    let sounds_position = 0;

    fetch(`${api_heard}/banner?type=2`).then(data => {
        return data.json();
    }).then(res => {
        const { banners } = res;
        let html = banners.map(item => `<div class="swiper-slide">
            <img src="${item.pic}">
            </div>`).join(' ');
        document.querySelector('.swiper-wrapper').innerHTML = html;
        runBannerBox();
    });

    let startX = 0;
    let moveX = 0;
    let cen = 0;
    loadRrsl();

    //拉起搜索界面
    search_ipt.addEventListener('click', () => {
        const back = document.querySelector('.search_pager');
        back.style = `top: 0`;
    });

    // 无限轮播图
    function runBannerBox() {
        const swipers = document.querySelectorAll('.swiper-slide');//轮播图盒子
        const swiperWrapper = document.querySelector('.swiper-wrapper');//图片
        let index = 0;
        let interve = null;
        swiperWrapper.appendChild(swiperWrapper.children[0].cloneNode(true));
        interve = setInterval(function () {
            index = index == swipers.length ? 0 : ++index;
            if (index == swipers.length) {
                swiperWrapper.style = `transform: translateX(-${index}00%);transition: all .5s ease-in-out;`;
                setTimeout(() => {
                    swiperWrapper.style = `transform: translateX(0%);transition: all 0s ease-in-out;`;
                }, 500);
                index = 0;
                return;
            }
            swiperWrapper.style = `transform: translateX(-${index}00%);`;
        }, 3000);
    }

    //加载推荐歌单
    function loadRrsl() {
        fetch(`${api_heard}/personalized?limit=30`)
            .then(data => data.json())
            .then(res => {
                const { result } = res;
                let html = result.map(item => {
                    return `
                    <div class="item">
                        <img data-id = "${item.id}" src="${item.picUrl}" alt="">
                        <p>${item.name}</p>
                     </div>
                    `;
                }).join(' ');
                reco_song_list.innerHTML = html;
                moveRrsl();
            })
    }

    //加载歌单id的所有歌曲
    function loadAllRsl(id) {
        sh_back.addEventListener('click', () => {
            soud_list.style.top = `100%`;
        });
        fetch(`${api_heard}/playlist/track/all?id=${id}&limit=20&offset=1`)
            .then(data => data.json())
            .then(res => {
                const { songs } = res;
                misList = []
                if (songsList.length > 0) songsList.splice(0, songsList.length);
                let html = songs.map((item, index) => {
                    songsList.push(item.id);
                    misList.push({
                        id: item.id,
                        songName: item.name,
                        name: item.ar[0].name
                    })
                    return `
                    <div class="item" data-id = "${item.id}" data-index = "${index}">
                        <p class="asl_id">${index + 1}</p>
                        <div class="asl_name">
                            <p>${item.name}</p>
                            <p>${item.al.name}</p>
                        </div>
                        <img src="./images/more.png" alt="">
                    </div>
                    `;
                }).join(' ');
                al_sond_list.innerHTML = html;

                // 歌单页面的点击播放音乐实现
                al_sond_list.addEventListener('click', e => {
                    if (e.target.tagName == 'P') {
                        render(misList)
                        let id = e.target.parentNode.parentNode.dataset.id;
                        loadMusic(id);
                        sounds_position = e.target.parentNode.parentNode.dataset.index;
                        music_pager.style.top = `0%`;
                        itemHighlight(sounds_position);//当前播放列表对应item高亮(当前播放的歌曲)
                    }
                });

            });
    }

    function moveRrsl() {
        //允许滑动最大距离
        const items = document.querySelectorAll('.reco_song_list>.item');
        let maxRight = -items[items.length - 1].offsetLeft + items[0].offsetWidth * 2.5;
        //记录手指第一次按下的位置
        reco_song_list.addEventListener('touchstart', function (e) {
            startX = e.targetTouches[0].pageX;
        });
        //跟随手指移动盒子
        reco_song_list.addEventListener('touchmove', function (e) {
            e = e || window.event;
            e.preventDefault();

            moveX = e.targetTouches[0].pageX - startX;
            let tempX = cen + moveX;
            reco_song_list.style = `transform: translateX(${tempX}px);`;
        });
        //记录最后一次值
        reco_song_list.addEventListener('touchend', function (e) {
            let dx = e.changedTouches[0].clientX - startX;
            cen = cen + dx;
            if (cen > 0) {
                cen = 0;
                reco_song_list.style = `transform: translateX(${0}px);`;
            } else if (cen <= maxRight) {
                cen = maxRight;
                reco_song_list.style = `transform: translateX(${maxRight}px);`;
            }
        });

        //歌单点击
        const rsl_item = document.querySelectorAll('.reco_song_list>.item');
        rsl_item.forEach((item, index) => {
            rsl_item[index].addEventListener('click', e => {
                let id = e.target.dataset.id;
                loadAllRsl(id);
                soud_list.style.top = 0;
            });
        });
    }

    //实现进度条方法
    audio.addEventListener('timeupdate', function () {
        let width_pro = (this.currentTime / this.duration) * 100;
        pro_line.style.width = width_pro + '%';

        let lastTime_minute = parseInt((this.duration - this.currentTime) / 60 % 60);
        let lastTime_second = parseInt((this.duration - this.currentTime) % 60);

        let start_time_m = parseInt(this.currentTime / 60 % 60);
        let start_time_s = parseInt(this.currentTime % 60);

        if (!/NaN/.test(lastTime_minute)) {
            end_time.innerHTML = pasTime(lastTime_minute, lastTime_second);
            start_time.innerHTML = pasTime(start_time_m, start_time_s);
        }
    });

    //转换时间
    function pasTime(mi, sc,) {
        let m = mi < 10 ? '0' + mi : mi;
        let s = sc < 10 ? '0' + sc : sc;
        return `${m}:${s}`;
    }

    //搜索音乐
    search_enter.addEventListener('click', () => {
        let word = document.querySelector('.sep_border>input').value;
        fetch(`${api_heard}/search?keywords=${word}`).then(data => data.json())
            .then(res => {
                const { result: songs } = res;
                let html = songs.songs.map((item, index) => {
                    const { artists } = item
                    return `
                    <div class="item" data-id = "${item.id}" data-index = "${index}"
                    data-name = "${item.artists[0].name}" data-songname = "${item.name}">
                        <p class="asl_id">${index + 1}</p>
                        <div class="asl_name">
                            <p>${item.name}</p>
                            <p>${item.artists[0].name}</p>
                        </div>
                        <img src="./images/more.png" alt="">
                    </div>
                    `;
                }).join(' ');
                search_sond_list.innerHTML = html;

            });

    });

    //搜索音乐页面的点击播放音乐功能实现
    search_sond_list.addEventListener('click', e => {
        if (e.target.tagName == 'P') {
            let id = e.target.parentNode.parentNode.dataset.id;
            songsList.push(id);
            misList.push({
                id: id,
                songName: e.target.parentNode.parentNode.dataset.songname,
                name: e.target.parentNode.parentNode.dataset.name
            })
            loadMusic(id);
            sounds_position = songsList.length - 1;
            music_pager.style.top = `0%`;
            render(misList)
            itemHighlight(sounds_position);//当前播放列表对应item高亮(当前播放的歌曲)
        }
    });

    search_page_back.addEventListener('click', () => {
        const back = document.querySelector('.search_pager');
        back.style = `top: 100%`;
    })
    audio.addEventListener('error', (e) => {
        if (misList.length > 1) {
            alert('该音乐受版权保护,不能播放！即将为你播放下一首!')
            audio.pause();
            operatingMusic(true);
        } else {
            alert('该音乐受版权保护，不能播放')
        }

    })
</script>

<script src="./js/play_music.js"></script>

</html>