APlayer 网页音乐播放器 + pjax 翻页音乐不中断-JavaScript-Savalone's Blog

引入：

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

参数：

名称	默认值	描述
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

例子：

const ap = new APlayer({
    container: document.getElementById('player'),
    mini: false,
    autoplay: false,
    theme: '#FADFA3',
    loop: 'all',
    order: 'random',
    preload: 'auto',
    volume: 0.7,
    mutex: true,
    listFolded: false,
    listMaxHeight: 90,
    lrcType: 3,
    audio: [
        {
            name: 'name1',
            artist: 'artist1',
            url: 'url1.mp3',
            cover: 'cover1.jpg',
            lrc: 'lrc1.lrc',
            theme: '#ebd0c2'
        },
        {
            name: 'name2',
            artist: 'artist2',
            url: 'url2.mp3',
            cover: 'cover2.jpg',
            lrc: 'lrc2.lrc',
            theme: '#46718b'
        }
    ]
});

其他高级设置可根据官方教程配置：APlayer 官网教程：https://aplayer.js.org/#/zh-Hans/?id=%E5%AE%89%E8%A3%85

配置 pjax：

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.pjax.js" ></script>
<script>
    $(document).pjax('a', '#container', {fragment:'#container', timeout:8000});
</script>

完整案例：

<!DOCTYPE html>
<html> 
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<title>XXX</title>
<body>
<div id="container">这里是正文内容</div><!--这里是正文内容-->
<div id="aplayer"></div><!--这里是aplayer播放器-->
<link rel="stylesheet" href="css/APlayer.min.css">  <!--aplayer css-->
<script type="text/javascript" src="js/jquery.min.js"></script>  <!--jq-->
<script src="js/APlayer.min.js"></script> <!--aplayer js-->
<script type="text/javascript" src="js/jquery.pjax.js" ></script> <!--pjax-->
<script>
    $(document).pjax('a', '#container', {fragment:'#container', timeout:8000});   /*pjax 关联正文内容id container*/
    const ap = new APlayer({
    container: document.getElementById('aplayer'),
    autoplay: 'true',
    fixed: 'true',
    listMaxHeight: 300,
    audio: [
    {
        name: '让青春继续-01',
        artist: 'Amy 剧场',
        url: 'music/01.mp3',
        cover: 'img/ico.jpg'
    },    {
        name: '让青春继续-02',
        artist: 'Amy 剧场',
        url: 'music/02.mp3',
        cover: 'img/ico.jpg'
    },   
    ]
});     
</script>
</body>
</html>