Aplayer is a beautiful HTML5 music player

Doc here: Link

For wordpress

Download js and css here.

<link rel="stylesheet" href="https://maruwtc.com/file/APlayer.min.css">
<script src="https://maruwtc.com/file/APlayer.min.js">
Code language: HTML, XML (xml)

<div id="aplayer"></div>
<script type="text/javascript">
        const ap = new APlayer({
            container: document.getElementById('aplayer'),
            audio: [
                {name: xxx, artist: xxx,    url: xxx,   cover: xxx  }]
            });
</script>
Code language: HTML, XML (xml)

<script type="text/javascript">
        const ap = new APlayer({
            container: document.getElementById('aplayer'),
            fixed: true,
            autoplay: false,
            preload: 'auto',
            loop: 'all',
            order: 'random',
            volume: 0.1,
            mutex: true,
            audio: [
            {   name: 'ハルカ',
                artist: 'YOASOBI',
                url: 'https://maruwtc.com/file/YOASOBI-ハルカ.flac',
                cover: 'https://maruwtc.com/wp-content/uploads/2022/01/Yoasobi_-_Haruka.jpg'
            },
            {   name: '歌に形はないけれど',
                artist: '花たん',
                url: 'https://maruwtc.com/file/花たん-歌に形はないけれど.flac',
                cover: 'https://maruwtc.com/wp-content/uploads/2022/01/maxresdefault.jpg'
            },
            {   name: 'MEMORIA',
                artist: '藍井エイル',
                url: 'https://maruwtc.com/file/藍井エイル-MEMORIA.flac',
                cover: 'https://maruwtc.com/wp-content/uploads/2022/01/51n982AjiPL._AC_SX425_.jpg',
            },
            {   name: 'YOASOBI',
                artist: 'アンコール',
                url: 'https://maruwtc.com/file/YOASOBI (ヨアソビ)-アンコール.flac',
                cover: 'https://maruwtc.com/file/YOASOBI.jpg',
            },
            {   name: 'Official髭男dism',
                artist: 'パラボラ',
                url: 'https://maruwtc.com/file/Official髭男dism-パラボラ.flac',
                cover: 'https://maruwtc.com/file/パラボラ.jpg',
            },
            {   name: 'Supper Moment',
                artist: '幸福之歌',
                url: 'https://maruwtc.com/file/Supper Moment-幸福之歌.mp3',
                cover: 'https://maruwtc.com/file/Supper Moment-幸福之歌.jpg',
            },
            {   name: '林奕匡',
                artist: '有人共鳴',
                url: 'https://maruwtc.com/file/林奕匡 - 有人共鳴.flac',
                cover: 'https://maruwtc.com/file/林奕匡 - 有人共鳴.jpg',
            },
            {   name: '林宥嘉',
                artist: '說謊',
                url: 'https://maruwtc.com/file/林宥嘉 - 說謊.flac',
                cover: 'https://maruwtc.com/file/林宥嘉 - 說謊.jpg',
            },
            {   name: 'AGA',
                artist: '問好',
                url: 'https://maruwtc.com/file/AGA - 問好.flac',
                cover: 'https://maruwtc.com/file/AGA - 問好.jpg',
            },
            {   name: '周興哲',
                artist: '你，好不好？',
                url: 'https://maruwtc.com/file/周興哲 -你，好不好？.flac',
                cover: 'https://maruwtc.com/file/周興哲 -你，好不好？.jpg',
            },
            ]
        });
</script>
Code language: HTML, XML (xml)