Aplayer设置
sunshj Lv4
  2021-03-28 09:37:57 2021-03-28 09:37   2021-04-07 08:19:38      366 字  2 分钟  

如果需要查看更多功能，还是得去aplayer官网

Aplayer设置

原生Audio

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<link href="https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.js"></script>
<link rel="stylesheet" href="APlayer.min.css">
<div id="aplayer"></div>
<script src="APlayer.min.js"></script>
<script src="color-thief.js"></script>

<script>
    const ap = new APlayer({
        container: document.getElementById('aplayer'),
        theme: '#333333',
        volume:'0.6',
        lrcType: 3,
        audio: [{
            name: 'ハルジオン',
            artist: 'YOASOBI',
            url: 'audio/harujion/music01.mp3',
            cover: 'audio/harujion/cover01.jpg',
            lrc: 'audio/harujion/lrc01.lrc'
            
        }, {
            name: '優しい彗星',
            artist: 'YOASOBI',
            url: 'audio/yasashiisuise/music02.mp3',
            cover: 'audio/yasashiisuise/cover02.jpg'
        }]
    });
</script>

吸底模式+网易云

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<link rel="stylesheet" href="APlayer\dist\APlayer.min.css">
<script src="APlayer\dist\APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@1.2.0/dist/Meting.min.js"></script>
<div class="aplayer" 
     data-global="true" 
     data-id="5464313037" 
     data-server="netease" 
     data-type="playlist"
     data-fixed="true" 
     data-listFolded="true" 
     data-autoplay="true" 
     data-order="list" 
     data-volume="0.5" 
     data-theme="#cc543a"
     data-preload="auto" >
</div>

吸底隐藏为箭头

1
2
3
4
5
6
7
8
9
<style type="text/css">
    .aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
        left: -66px !important
    }

    .aplayer.aplayer-fixed.aplayer-narrow .aplayer-body:hover {
        left: 0 !important
    }
</style>
 评论
  1. Aplayer设置
    1. 原生Audio
    2. 吸底模式+网易云
    3. 吸底隐藏为箭头