官方教程：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 即為這串數字。