Hexo 使用 APlayer 播放音乐

使用 Aplayer 效果

如何使用？

设置 div 容器并引css和 js

<style>
    #aplayer {
        width: 50%;
        margin: 0 auto;
    }
    @media screen and (max-device-width: 400px) {
        #aplayer {
            width: 100%;
        }
    }
</style>

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

设置单曲

<script>
const app = new APlayer({
    container: document.getElementById('aplayer'),
    audio: [{
        name: '丑八怪',                          <!-- 歌曲名称-->
        artist: '薛之谦',                        <!-- 歌曲作者-->
        url: '/resources/music/丑八怪.mp3',      <!-- 歌曲路径-->
        cover: '/resources/music/认真的雪.jpg',  <!-- 歌曲封面图片-->
        theme: '#46718b'                        <!-- 选中歌曲的主题-->
    }]
});
</script>

设置歌曲列表

<script>
const ap = new APlayer({
    container: document.getElementById('aplayer'),
    mini: false,            <!-- 不启用迷你播放模式 -->
    autoplay: false,        <!-- 音频不自动播放 -->
    theme: '#FADFA3',       <!-- 主题色 -->
    loop: 'all',            <!-- 音频循环播放, 可选值: 'all', 'one', 'none'-->
    order: 'random',        <!-- 音频循环顺序, 可选值: 'list', 'random'-->
    preload: 'auto',        <!-- 预加载，可选值: 'none', 'metadata', 'auto'-->
    volume: 0.7,            <!-- 默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效-->
    mutex: true,            <!-- 互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器 -->
    listFolded: false,      <!-- 列表默认折叠， false表示不折叠-->
    listMaxHeight: '120px', <!-- 列表最大高度，超出此高度将有滚动条-->
    lrcType: 0,             <!-- 歌词类型，0表示不显示歌词-->
    audio: [
        {
            name: '丑八怪',                         <!-- 歌曲名称-->
            artist: '薛之谦',                       <!-- 歌曲作者-->
            url: '/resources/music/丑八怪.mp3',     <!-- 歌曲路径-->
            cover: '/resources/music/认真的雪.jpg', <!-- 歌曲封面图片-->
            theme: '#46718b'                       <!-- 选中歌曲的主题-->
        },
        {
            name: '丑八怪',
            artist: '薛之谦',
            url: '/resources/music/丑八怪.mp3',
            cover: '/resources/music/认真的雪.jpg',
            theme: '#46718b'
        },
        {
            name: '丑八怪',
            artist: '薛之谦',
            url: '/resources/music/丑八怪.mp3',
            cover: '/resources/music/认真的雪.jpg',
            theme: '#46718b'
        }
    ]
});
</script>

相关链接

🍭 APlayer 官方文档： https://aplayer.js.org/#/zh-Hans/