Aplayer使用教程

很多人想要在网站里添加背景音乐，但又苦于没有合适的音乐播放器，在这里我给大家介绍一款我个人觉得比较好的音乐播放器——Aplayer
这是GitHub项目地址 https://github.com/MoePlayer/APlayer
这是项目的开发文档：https://aplayer.js.org/#/zh-Hans/
现在给大家简单说明一下使用方法这是播放器所用到的所有参数（不用全部设置）

参数

名称	默认值	描述
container	document.querySelector(‘.aplayer’)	播放器容器元素
fixed	false	开启吸底模式, 详情
mini	false	开启迷你模式, 详情
autoplay	false	音频自动播放
theme	‘#b7daff’	主题色
loop	‘all’	音频循环播放, 可选值: ‘all’, ‘one’, ‘none’
order	‘list’	音频循环顺序, 可选值: ‘list’, ‘random’
preload	‘auto’	预加载，可选值: ‘none’, ‘metadata’, ‘auto’
volume	0.7	默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
audio	-	音频信息, 应该是一个对象或对象数组
audio.name	-	音频名称
audio.artist	-	音频艺术家
audio.url	-	音频链接
audio.cover	-	音频封面
audio.lrc	-	详情
audio.theme	-	切换到此音频时的主题色，比上面的 theme 优先级高
audio.type	‘auto’	可选值: ‘auto’, ‘hls’, ‘normal’ 或其他自定义类型, 详情
customAudioType	-	自定义类型，详情
mutex	true	互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
lrcType	0	详情
listFolded	false	列表默认折叠
listMaxHeight	-	列表最大高度
storageName	‘aplayer-setting’	存储播放器设置的 localStorage key

调用方法：首先在网页内调用js

1
2
3

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

设置播放器参数

const ap = new APlayer({
    container: document.getElementById('aplayer'),
    audio: [{
        name: 'name',
        artist: 'artist',
        url: 'url.mp3',
        cover: 'cover.jpg'
    }]
});

当然你也可以用JavaScript的方式引用

const ap = new APlayer({
    container: document.getElementById('aplayer'),
    audio: [{
        name: 'name',
        artist: 'artist',
        url: 'url.mp3',
        cover: 'cover.jpg'
    }]
});

最后一句ap.init();最好加上上面是最基本的构架，下面是比较完整的构架（支持多首歌）也是我正在用的

<script type="text/javascript">
 var ap = new APlayer({
    container: document.getElementById('player'),
    listFolded: false,
    fixed: true,
    listMaxHeight: 90,
    lrcType: 3,
	  autoplay: true,
    audio: [
        {
            name: '',
            artist: '',
            url: '',
            cover: '',
            lrc: '',
            theme: '#ebd0c2'
        },
        {
            name: '',
            artist: '',
            url: '',
            cover: '',
            lrc: '',
            theme: '#46718b'
        },
                        {
            name: '',
            artist: '',
            url: '',
            cover: '',
            lrc: '',
            theme: '#46718b'
        }
			
    ]
});
	ap.init();  
</script>

最后一首歌就可以不用“,”了。还有歌词的话我建议用lrc文件封装然后引用，不要直接填在代码里，这样会造成代码冗长
如果你保存浏览时发现播放器不显示或者播放器显示异常，请查看你的配置里面是否少了“ ’ ”或者“,” 少了这几个都是会造成播放器不显示的。
最后祝大家成功部署属于自己的播放器