博客园添加背景音乐以及播放器 或在左下方固定位置添加音乐播放器 给你的博文锦上添花，增姿添彩

官方教程：https://aplayer.js.org/#/zh-Hans/

一、第一种样式 

这种你想添加多少音乐就添加多少音乐！

将下方代码复制到博客侧边栏！

话不多说！

上代码！

<!-- 为博客底部添加音乐组件 -->
<div id="player"  class="aplayer"></div>
<link href="https://files.cnblogs.com/files/shwee/APlayer.min_v1.10.1.css" rel="stylesheet">
<script src="https://files.cnblogs.com/files/shwee/APlayer.min_v1.10.1.js"></script> 

<script type="text/javascript">
var ap = new APlayer({
    element: document.getElementById('player'),
    narrow: false,
    autoplay: false,          <!-- 是否自动播放 -->
    showlrc: true, <!--是否开启歌词功能 ，默认false（为true时musics集合中需要传入lrc字段。）-->
    fixed:1,<!-- 是否固定在左下角不动， 1即为true -->
    theme: '#F5F5F5',      <!-- 插件背景颜色，建议和你的公告栏背景色一样，这样融为一体的感觉 -->
    music: [{
            title: '醉玲珑',
            author: '李瑨瑶',
            url: 'http://m10.music.126.net/20201219204654/0c4abec28edf0cd281411d6905d2fb0f/ymusic/ca71/3284/f58b/98a3c448f2dca3127f01b90f903c3783.mp3',
            pic: 'http://images.cnblogs.com/cnblogs_com/shwee/1218109/o_music_pic1.png'
        },
        {
            title: '那些花儿',
            author: '朴树',
            url: 'http://music.163.com/song/media/outer/url?id=28996922.mp3',
            lrc:"[00:00.000] 作词 : 朴树[00:01.000] 作曲 : 朴树[00:17.36]那片笑声让我想起[00:20.72]我的那些花儿[00:24.38]在我生命每个角落[00:28.21]静静为我开着[00:32.21]我曾以为我会永远[00:36.01]守在她身旁[00:40.11]今天我们已经离去[00:43.85]在人海茫茫[00:47.08]她们都老了吧?[00:50.76]她们在哪里呀?[00:55.23]幸运的是我[00:58.83]曾陪她们开放[01:02.99]啦.....想她[01:10.67]啦.....她还在开吗?[01:18.43]啦.....去呀[01:26.38]她们已经被风吹走[01:30.12]散落在天涯[01:33.22][01:49.61]有些故事还没讲完[01:53.47]那就算了吧[01:57.16]那些心情在岁月中[02:01.06]已经难辨真假[02:05.21]如今这里荒草丛生[02:09.06]没有了鲜花[02:13.04]好在曾经拥有你们的春秋和冬夏[02:20.29]她们都老了吧?[02:23.85]她们在哪里呀?[02:28.54]幸运的是我曾陪她们开放[02:35.83]啦.....想她[02:43.54]啦.....她还在开吗?[02:51.28]啦.....去呀[02:59.42]她们已经被风带走[03:03.20]散落在天涯[03:06.82]啦……[03:14.54]啦……[03:22.42]啦……[03:30.02]……[04:01.98]人们就像被风吹走插在了天涯[04:08.66]她们都老了吧?[04:12.26]她们还在开吗？[04:16.74]我们就这样[04:20.74]各自奔天涯[04:25.16]"
        }
    ]
});
ap.init();
</script>

1.如何添加歌曲

 

只需要在进入163网易云音乐，随便打开一首你喜欢的歌曲，在地址栏中的末尾会出现歌曲的数字标识符，把它复制过来，添加到下面的公式上就好。

或者点击生成外链播放器也可查看 ，数字都是一样的！
如：
 

 

 

公式为：
http://music.163.com/song/media/outer/url?id=****.mp3    

 

把 id 覆盖掉 **** 号即可

这种方式不易出错！

2.效果演式

 始终停留在左下角 ，滚动也是如此！

取消固定 即将fixed赋值为false，则播放器会到侧栏中！

 

 

 

 

二、第二种样式

依旧放在博客侧边栏（这个是单音乐类）

 

另一个模式：单音乐


<!-- 音乐播放器的位置 -->


<div id="aplayer"  data-id="865331941" ><p id="aplayer" ></p></div>




<!-- 添加音乐播放器音乐可以自己选择src的网易云内的音乐链接 -->
<script type="text/javascript">
var iii = document.createElement('iframe');
iii.src = '//music.163.com/outchain/player?type=2&id=28996922&auto=1&height=66';
iii.height = 86;
iii.width=200;
$("#aplayer").after(iii);
</script>

 

 2.效果演示

 

 

二、第三种样式

 

 这种方法就不那么麻烦了，直接用自己的歌单就行，不用像第一种样式自己一个一个加音乐到歌单代码里了！！

 

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.css">
<script src="https://files.cnblogs.com/files/wkfvawl/APlayer.min.js"></script>
<div id="aplayer" class="aplayer"  data-id="21263673" data-server="netease" data-type="playlist" data-fixed="true" data-listfolded="true" data-order="random" data-theme="#F58EA8"></div>


<script src="https://unpkg.com/meting@1.2/dist/Meting.min.js"></script>

这个跟前面不一样，这个代码要放到页脚/页首！

想要自动播放的话，就添加data-autoplay="true"到第三行代码div后面

 

    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, //列表默认折叠
    listMaxHeight: 90, //列表最大高度
    lrcType: 3, //歌词传递方式

server 可选 netease（网易云音乐），tencent（QQ 音乐），kugou（酷狗音乐），xiami（虾米音乐），

baidu（百度音乐）。

type 可选 song（歌曲），playlist（歌单），album（专辑），search（搜索关键字），artist（歌手）

id 获取示例：浏览器打开网易云音乐，点击我喜欢的音乐歌单，地址栏有一串数字，playlist 的 id 即为这串数字。

 

 

 

1.歌单id在哪？

 

 

 

将这串数字替换代码中data-id后面的数字即可！

2.效果演示

 

 

 

 

有问题大家多多交流！请大家雅正！