简单示例

html代码

<div id="aplayer"></div>

js代码

const ap = new APlayer({
    container: document.getElementById('aplayer'),
    mini: false,
    autoplay: false,
    theme: '#FADFA3',
    loop: 'all',
    order: 'list',
    preload: 'auto',
    volume: 0.7,
    mutex: true,
    listFolded: false,
    listMaxHeight: 300,
    lrcType: 3,
    audio: [
        {
            name: '说好不哭',
            artist: '周杰伦',
            url: 'music/shbk.mp3',
            cover: 'music/shbk.png',
            lrc: '',
            theme: '#F47378'
        },
        {
            name: '年少有为',
            artist: '李荣浩',
            url: 'music/nsyw.mp3',
            cover: 'music/nsyw.png',
            lrc: '',
            theme: '#F47378'
        },
        {
            name: '那些女孩教我做的事(带歌词)',
            artist: '品冠',
            url: 'music/nvhai.mp3',
            cover: 'music/nvhai.jpg',
            lrc: 'music/nvhai.lrc',
            theme: '#F47378'
        },
        {
            name: '还有我',
            artist: '任贤齐',
            url: 'music/hyw.wav',
            cover: 'music/hyw.png',
            lrc: '',
            theme: '#F47378'
        },
        {
            name: '知否知否',
            artist: '胡夏郁可唯',
            url: 'music/zf.wav',
            cover: 'music/zf.png',
            lrc: '',
            theme: '#F47378'
        },
        {
            name: '男孩',
            artist: '梁博',
            url: 'music/nh.wav',
            cover: 'music/nh.png',
            lrc: '',
            theme: '#F47378'
        },
        {
            name: '盛夏',
            artist: '毛不易',
            url: 'music/sx.wav',
            cover: 'music/sx.png',
            lrc: '',
            theme: '#F47378'
        }
    ]
});

网站地址：https://aplayer.js.org/

GitHub：https://github.com/MoePlayer/APlayer