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
29
30
31
32
33
34
35

<!-- 为博客底部添加音乐组件 -->
<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,
    loop: 'all',<!-- 全部循环 -->
    order: 'random',<!-- 随机循环 -->
    volume: 0.2,<!-- 播放音量 -->
    autoplay: true,          <!-- 是否自动播放 -->
    showlrc: true, <!--是否开启歌词功能 ，默认false（为true时musics集合中需要传入lrc字段。）-->
    fixed:1,<!-- 是否固定在左下角不动， 1即为true -->
    theme: '#F5F5F5',      <!-- 插件背景颜色，建议和你的公告栏背景色一样，这样融为一体的感觉 -->
    music: [
        {
            title: '世间美好与你环环相扣',
            author: '柏松',
            url: 'http://music.163.com/song/media/outer/url?id=1363948882.mp3',
            pic: 'http://p1.music.126.net/DK1_4sP_339o5rowMdPXdw==/109951164071024476.jpg?param=300x300',
            lrc: '[00:00.000] 作词 : 尹初七[00:01.000] 作曲 : 柏松[00:02.000] 编曲 : 彭圣杰[00:15.554][00:28.054]偏偏秉烛夜游[00:31.054]午夜星辰 似奔走之友[00:34.554]爱你每个结痂伤口[00:37.554]酿成的陈年烈酒[00:40.804][00:41.804]入喉尚算可口[00:44.803]怎么泪水 还偶尔失守[00:48.553]邀你细看心中缺口[00:51.053]裂缝中留存 温柔[00:55.804][00:57.553]此时已莺飞草长 爱的人正在路上[01:01.802]我知他风雨兼程 途经日暮不赏[01:05.552]穿越人海 只为与你相拥[01:11.552]此刻已皓月当空 爱的人手捧星光[01:15.302]我知他乘风破浪 去了黑暗一趟[01:19.052]感同身受 给你救赎热望[01:25.302][01:26.052]知道你不能 还要你感受[01:29.802]让星光加了一点彩虹[01:32.802]让樱花偷偷 吻你额头[01:36.553]让世间美好 与你环环相扣[01:41.303][01:42.052]此时已莺飞草长 爱的人正在路上[01:46.302]我知他风雨兼程 途经日暮不赏[01:50.302]穿越人海 只为与你相拥[01:55.802]此刻已皓月当空 爱的人手捧星光[01:59.802]我知他乘风破浪 去了黑暗一趟[02:04.052]感同身受 给你救赎热望[02:09.051][02:09.551]此时已莺飞草长 爱的人正在路上[02:13.550]我知他风雨兼程 途经日暮不赏[02:17.801]穿越人海 只为与你相拥[02:23.301]此刻已皓月当空 爱的人手捧星光[02:27.550]我知他乘风破浪 去了黑暗一趟[02:31.551]感同身受 给你救赎热望[02:37.051][02:38.300]知道你不能 还要你感受[02:41.300]让星光加了一点彩虹[02:44.800]当樱花开的纷纷扬扬[02:48.301]当世间美好 与你环环相扣[02:58.300]特别鸣谢：槿葵，我们的海报制作妹妹。[03:05.554]原唱：柏松[03:06.055]吉他：柏松[03:07.054]和声：柏松[03:07.804]录音：柏松[03:08.804]混音：张强'
        },
         {
             title: '阿拉斯加海湾',
             author: '蓝心羽',
             url: 'http://music.163.com/song/media/outer/url?id=1500569811.mp3',
             pic: 'http://p2.music.126.net/CbWwREaA22LmAv1oOtJt2w==/109951165518862422.jpg?param=300x300',
             lrc: '[00:00.000] 作词 : 菲道尔/李康宁[00:00.299] 作曲 : 菲道尔[00:00.598]原唱：菲道尔[00:01.605]演唱：蓝心羽[00:02.606]编曲：于山川@Cstudio[00:03.608]贝斯：石间@Cstudio[00:04.604]吉他：丁兆尊龙[00:05.358]和声编写：田跃君[00:06.360]和声：蓝心羽[00:07.108]混音：王巍MOKA[00:08.115]制作人：杜叔叔[00:09.105]策划统筹：文氓苏[00:10.107]宣发：张婧、寂瞳、游文雅、杜钰雯[00:10.851]OP：Loolala Music M Sdn. Bhd.[00:11.777]SP：环球音乐版权管理集团(Universal Music Publishing CHINA)[00:13.198]音乐制作：极韵文化&BLUE STUDIO[00:14.446]音乐发行：极韵文化&BLUE STUDIO[00:15.448]出品：「极韵文化」×「BLUE STUDIO」×「造音行动」[00:16.698]【此版本为正式授权翻唱作品】[00:21.950]上天啊[00:24.990]难道你看不出我很爱她[00:29.110]怎么明明相爱的两个人[00:32.560]你要拆散他们啊[00:38.730]上天啊[00:41.630]你千万不要偷偷告诉她[00:45.940]在无数夜深人静的夜晚[00:49.550]有个人在想她[00:54.710]以后的日子你要好好照顾她[01:03.088]我不在她身旁你不能欺负她[01:11.209]别再让人走进她心里[01:15.679]最后却又离开她[01:20.539]因为我不愿再看她流泪啦[01:41.268]上天啊[01:44.250]你是不是在偷偷看笑话[01:48.349]明知我还没能力保护她[01:52.110]让我们相遇啊[01:58.149]上天啊[02:00.868]她最近是否不再失眠啦[02:05.108]愿世间温情化作一缕风[02:08.800]代替我拥抱她[02:14.068]以后的日子你要好好照顾她[02:22.288]我不在她身旁你不能欺负她[02:30.558]别再让人走进她心里[02:34.679]最后却又离开她[02:39.929]因为我不愿再看她流泪啦[02:47.498]希望我的努力能够赶上她[02:55.710]有天我能给她完整的一个家[03:04.110]可若你安排了别人给她[03:09.098]我会祝福她[03:12.938]上天你别管我先让她幸福吧[03:21.330]上天啊[03:24.399]这些晚上我对你说的话[03:28.619]你别不小心漏嘴告诉她[03:32.300]我怕会吵醒她[03:38.339]上天啊[03:41.429]你千万不要偷偷告诉她[03:45.580]在无数夜深人静的夜晚[03:49.248]我依旧在想她'
         },
    ]
});
ap.init();
</script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

    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, //歌词传递方式

1
2
3
4
5

title：  歌曲名称
author： 歌手
url：　  歌曲外联地址
pic：　  歌曲外联封面
lrc：　  歌词