引入APlayer插件

<link rel="stylesheet" href="APlayer.min.css"> 
<script src="APlayer.min.js"></script>

播放器html代码

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

1、默认样式

ap1.init();
var ap2 = new APlayer({
    element: document.getElementById('player'),
    narrow: true,
    autoplay: false,
    showlrc: false,
    music: {
        title: 'Preparation',
        author: 'Hans Zimmer/Richard Harvey',
        url: 'http://7xifn9.com1.z0.glb.clouddn.com/Preparation.mp3',
        pic: 'http://7xifn9.com1.z0.glb.clouddn.com/Preparation.jpg'
    }
});

2、自动播放并显示歌词

ap2.init();
var ap3 = new APlayer({
    element: document.getElementById('player'),
    narrow: false,
    autoplay: true,
    showlrc: true,
    music: {
        title: '平凡之路',
        author: '朴树',
        url: 'http://7xifn9.com1.z0.glb.clouddn.com/平凡之路.mp3',
        pic: 'http://7xifn9.com1.z0.glb.clouddn.com/平凡之路.jpg'
    }
});

3、只显示缩略图和播放按钮

var ap1 = new APlayer({
    element: document.getElementById('player'),
    narrow: false,
    autoplay: false,
    showlrc: false,
    music: {
        title: 'Preparation',
        author: 'Hans Zimmer/Richard Harvey',
        url: 'http://7xifn9.com1.z0.glb.clouddn.com/Preparation.mp3',
        pic: 'http://7xifn9.com1.z0.glb.clouddn.com/Preparation.jpg'
    }
});