Aplayer设置

原生Audio

<link href="https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.js"></script>
<link rel="stylesheet" href="APlayer.min.css">
<div id="aplayer"></div>
<script src="APlayer.min.js"></script>
<script src="color-thief.js"></script>

<script>
    const ap = new APlayer({
        container: document.getElementById('aplayer'),
        theme: '#333333',
        volume:'0.6',
        lrcType: 3,
        audio: [{
            name: 'ハルジオン',
            artist: 'YOASOBI',
            url: 'audio/harujion/music01.mp3',
            cover: 'audio/harujion/cover01.jpg',
            lrc: 'audio/harujion/lrc01.lrc'
            
        }, {
            name: '優しい彗星',
            artist: 'YOASOBI',
            url: 'audio/yasashiisuise/music02.mp3',
            cover: 'audio/yasashiisuise/cover02.jpg'
        }]
    });
</script>

吸底模式+网易云

<link rel="stylesheet" href="APlayer\dist\APlayer.min.css">
<script src="APlayer\dist\APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@1.2.0/dist/Meting.min.js"></script>
<div class="aplayer" 
     data-global="true" 
     data-id="5464313037" 
     data-server="netease" 
     data-type="playlist"
     data-fixed="true" 
     data-listFolded="true" 
     data-autoplay="true" 
     data-order="list" 
     data-volume="0.5" 
     data-theme="#cc543a"
     data-preload="auto" >
</div>

吸底隐藏为箭头

<style type="text/css">
    .aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
        left: -66px !important
    }

    .aplayer.aplayer-fixed.aplayer-narrow .aplayer-body:hover {
        left: 0 !important
    }
</style>

Q.E.D.


狸猫控股集团大中华区秘书长