博客添加APlayer音乐播放器并实现全局音乐播放

简介

该项目由一名bilibili的前端大佬巨佬 Diygod 开源，目前最热门的网站播放器之一，拥有在线歌源、歌词滚动、随机播放等各种常用功能~

使用方式

前往上面的github地址，clone或者下载到本地，进入目录/dist找到 APlayer.min.css 和 APlayer.min.js 两个文件，复制到你的项目中

然后引用：

<link rel="stylesheet" href="APlayer.min.css">
<div id="aplayer"></div>
<script src="APlayer.min.js"></script>
<script>
    const ap = new APlayer({
        container: document.getElementById('aplayer'),
        fixed: true,                //是否附着页面底部，否为false
        volume: 0.7,                //初始音量（0~1）
        lrcType: 3,                 //歌词模式（1、HTML模式 2、js模式 3、lrc文件模式）
        mutex: true,                //互斥模式：阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
        order: 'random',            //音频循环顺序（'list'：顺序, 'random'：随机）
        preload: 'none',            //预加载（'none'：不预加载, 'metadata'：元数据, 'auto'：自动）
        listFolded: false,          //列表默认折叠，开启为true
        theme: '#ee8243',           //主题颜色
        audio: [{
            name: 'name',           //歌曲名称
            artist: 'artist',       //歌曲作者
            url: 'url.mp3',         //歌曲源文件地址
            cover: 'cover.jpg',     //歌曲封面地址
            theme: '#eeeeee'        //主题颜色（优先）
        }]
    });
</script>

如何获取网易云歌曲

点我前往

如何实现全局音乐播放器

实现博客全站不间断播放，需要用到pjax

pjax教程

简易教程：

pjax示例