好看的悬浮音乐播放器

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="http://at.alicdn.com/t/c/font_4343998_i6hbuh47j.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
            font-size: 16px;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
            text-decoration: none;
            list-style: none;
        }

        .icon {
            width: 1em;
            height: 1em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }

        .xfyykp {
            width: 280px;
            height: 140px;
            position: fixed;
            left: -300px;
            bottom: 80px;
            z-index: 999;
            border-radius: 0 20px 20px 0;
            background: url(http://nav.sihuanyun.com/templates/default/images/bg-cat-main.png) no-repeat top;
            background-size: 100% auto;
            padding-top: 30px;
            transition: left 1s linear 0s;
        }

        .bfq {
            width: 100%;
            height: 140px;
            background-image: linear-gradient(180deg, #FFF2EF 0%, #FFFFFF 50%);
            box-shadow: rgb(255, 209, 216) 0px 1px 4px 0px inset;
            display: flex;
            padding-top: 10px;
        }

        .yykjtop {
            display: flex;
        }

        .gqxx {
            width: 210px;
            height: 60px;
            padding: 0 5px;
        }

        .yyfm {
            width: 50px;
            height: 50px;
            flex-shrink: 0;
            /*防止被压缩*/
        }

        .yyfm img {
            width: 100%;
            height: 100%;
            border-radius: 20px;
            border: 3px solid #FFD1D8;
        }

        .yykj {
            width: 280px;
            padding: 0 10px;
        }

        .yykj h2 {
            color: #ffa9b8;
            text-align: center;
            font-weight: bold;
            padding-top: 10px;
            height: 40px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        #yyzuozhe {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #78c1ff;
            font-weight: bold;
            text-align: center;
            margin-bottom: 5px;
            font-size: 13px;
        }

        .xys:active {
            position: relative;
            left: 5px;
        }

        .bfzt:active {
            position: relative;
            left: 5px;
        }

        .kjy:active {
            position: relative;
            left: 5px;
        }

        .jindutiao {
            height: auto;
        }

        #progressBar {
            width: 100%;
            height: 10px;
            border-radius: 20px;
            background-color: #ccc;
            position: relative;
            overflow: hidden;
        }

        #progressBar .progress {
            height: 100%;
            border-radius: 20px;
            background-color: #ffa9b8;
            position: absolute;
            top: 0;
            left: 0;
        }

        .yyshijian {
            display: flex;
            justify-content: space-between;
            margin: 5px 0;
        }

        .bfqan {
            display: flex;
            justify-content: space-around;
        }

        .bfqan div svg {
            width: 100%;
            height: 100%;
            background-color: #fff;
        }

        .bfqan div {
            width: 20px;
            height: 20px;
            overflow: hidden;
        }

        #yousheng {
            display: block;
        }

        .zkan {
            width: 30px;
            height: 140px;
            line-height: 160px;
            background-color: #FFD1D8;
            position: absolute;
            border-radius: 0 15px 15px 0;
            right: -30px;
            top: 30px;
        }

        .zkan svg {
            width: 30px;
            height: 30px;
            transform: scaleX(1);
            transition: transform 0.5s linear 0s;
        }
    </style>
    <div class="xfyykp" id="xfyykpbox" style="left: -280px;">
        <div class="bfq">


            <div class="yykj">
                <div class="yykjtop">
                    <div class="yyfm">
                        <img id="yyimg" data-src="" >
                    </div>
                    <div class="gqxx">
                        <h2 id="yyname">歌曲名</h2>
                        <p id="yyzuozhe">作者</p>
                    </div>
                </div>

                <div class="jindutiao">
                    <audio id="bgMusic" src=""></audio>
                    <div id="progressBar"></div>
                    <div class="yyshijian">
                        <p id="currentTime">0:00</p>
                        <p id="zongsc">00:00</p>
                    </div>
                </div>
                <div class="bfqan">
                    <div class="bfzt">
                        <svg id="bofang" class="icon" aria-hidden="true">
                            <use xlink:href="#icon-bofang"></use>
                        </svg>
                        <svg id="zanting" class="icon" aria-hidden="true">
                            <use xlink:href="#icon-zanting"></use>
                        </svg>
                    </div>
                    <div class="xys">
                        <svg id="xiayishou" class="icon" aria-hidden="true">
                            <use xlink:href="#icon-xiayishou"></use>
                        </svg>
                    </div>
                    <div class="kjy" id="kjyb">
                        <svg id="yousheng" class="icon" aria-hidden="true">
                            <use xlink:href="#icon-yangshengqi"></use>
                        </svg>
                        <svg id="wusheng" class="icon" aria-hidden="true">
                            <use xlink:href="#icon-sound-off"></use>
                        </svg>
                    </div>

                </div>
            </div>

        </div>
        <div class="zkan" id="zkxtb">
            <svg class="icon" id="zkxtbx" aria-hidden="true">
                <use xlink:href="#icon-zhankai"></use>
            </svg>
        </div>
    </div>


    <script>
        // 获取音频和控件
const audio = document.getElementById('bgMusic'),
    bofang = document.getElementById('bofang'),
    zanting = document.getElementById('zanting'),
    xiayishou = document.getElementById('xiayishou'),
    yousheng = document.getElementById('yousheng'),
    wusheng = document.getElementById('wusheng'),
    $xys = $('.xys')

// 悬浮音乐卡片
function xfyykpgb() {
    const xfyykpgbb = document.getElementById('xfyykpbox'),
        zkxtbfz = document.getElementById('zkxtbx');
    if (xfyykpgbb.style.left === '-280px') {
        xfyykpgbb.style.left = '0';
        zkxtbfz.style.transform = 'rotate(180deg)';
    } else {
        xfyykpgbb.style.left = '-280px';
        zkxtbfz.style.transform = 'rotate(0deg)';
    }
}
const zkan = document.querySelector('.zkan')
zkan.addEventListener('click', () => xfyykpgb())

// 只执行一次
document.getElementById('zkxtbx').addEventListener('click', () => {
    $xys.trigger('click');

    // 执行一次后移除
}, {
    once: true
});

// 监听音乐播放状态
// 音乐正在播放
audio.addEventListener('play', function() {
    bofang.style.display = 'none'
    zanting.style.display = 'block'
    console.log('音乐正在播放');
});
// 音乐已暂停
audio.addEventListener('pause', function() {
    bofang.style.display = 'block'
    zanting.style.display = 'none'
    console.log('音乐已暂停');
});

// 进度条
var progressBar = document.getElementById('progressBar');
var currentTimeText = document.getElementById('currentTime');
progressBar.innerHTML = '<div class="progress"></div>';
var progress = progressBar.getElementsByClassName('progress')[0];

audio.addEventListener('timeupdate', function() {
    var percent = (audio.currentTime / audio.duration) * 100;
    progress.style.width = percent + '%';

    var currentMinutes = Math.floor(audio.currentTime / 60);
    var currentSeconds = Math.floor(audio.currentTime % 60);
    currentTimeText.textContent = currentMinutes + ':' + (currentSeconds < 10 ? '0' : '') + currentSeconds;
});

progressBar.addEventListener('click', function(e) {
    var percent = (e.offsetX / progressBar.offsetWidth) * 100;
    audio.currentTime = (percent / 100) * audio.duration;
});
// 获取音乐总时长
var zongsc = document.getElementById("zongsc");

audio.addEventListener("loadedmetadata", function() {
    var totalDuration = audio.duration;
    var minutes = Math.floor(totalDuration / 60);
    var seconds = Math.floor(totalDuration % 60);
    zongsc.textContent = (minutes < 10 ? '0' : '') + minutes + ':' + (seconds < 10 ? '0' : '') + seconds; // 显示总时长
});

// 播放/暂停
bofang.addEventListener("click", function() {
    audio.play()
});
zanting.addEventListener("click", function() {
    audio.pause()
});
// 下一首
// 封装随机数值
const random = (max, min) => Math.floor(Math.random() * (max - min + 1)) + min
// fetch get请求
fetch('https://api.xfyun.club/musicAll/?sortAll=%E7%83%AD%E6%AD%8C%E6%A6%9C')
    .then(res => res.json())
    .then(data => {
        $xys.on('click', () => {
            const i = random(data.length, 0)
            // 获取音乐总时长 duration
            const {artistsname,name,picurl,url,duration} = data[i]
            $('#yyname').text(name); // 歌曲名
            $('#yyimg').attr('src', picurl); // 歌曲图片
            $('#bgMusic').attr('src', url); // 歌曲地址
            $('#yyzuozhe').text(artistsname); // 歌曲作者
            audio.play().catch(err => console.warn('浏览器默认限制了自动播放: ' + err))
        })
    })

    .catch(err => console.error(`请求失败：${err}`))

// 播放结束自动下一首
audio.addEventListener('ended', function() {
    // 音乐播放结束后执行的事件
    console.log('音乐播放结束了！');
    $xys.trigger('click')
});

// 开静音
yousheng.addEventListener("click", function() {
    audio.muted = true;
    yousheng.style.display = "none";
    wusheng.style.display = "block"
});
//关静音
wusheng.addEventListener("click", function() {
    audio.muted = false;
    yousheng.style.display = "block";
    wusheng.style.display = "none";
});
    </script>