博客园添加音乐

管理 -  设置  - 公告 -添加下面代码

 

 

 

 

?

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 36 37 38 39 40

<!-- 为博客底部添加音乐组件 --> <div id="player"  class="aplayer"></div> <link href="https://blog-static.cnblogs.com/files/php-linux/APlayer.min_v1.10.1.css" rel="stylesheet"> <script src="https://blog-static.cnblogs.com/files/php-linux/APlayer.min_v1.10.1.js"></script>   <script type="text/javascript"> var ap = new APlayer({     element: document.getElementById('player'),     narrow: false,     autoplay: false,          <!-- 是否自动播放 -->     showlrc: false,     theme: '#F5F5F5',      <!-- 插件背景颜色，建议和你的公告栏背景色一样，这样融为一体的感觉 -->     music: [{             title: '往后余生',             author: '王贰浪',             url: 'https://blog-static.cnblogs.com/files/php-linux/%E7%8E%8B%E8%B4%B0%E6%B5%AA-%E5%BE%80%E5%90%8E%E4%BD%99%E7%94%9F.js',             pic: 'https://www.cnblogs.com/images/cnblogs_com/php-linux/674292/t_109951163337847600.jpg'         },         {             title: '拂雪',             author: '不才',             url: 'https://files.cnblogs.com/files/php-linux/%E4%B8%8D%E6%89%8D-%E6%8B%82%E9%9B%AA.js',             pic: 'https://www.cnblogs.com/images/cnblogs_com/php-linux/674292/t_6631154628171782.jpg'         },         {             title: '我的一个道姑朋友',             author: '洛尘鞅',             url: 'https://files.cnblogs.com/files/php-linux/%E6%B4%9B%E5%B0%98%E9%9E%85-%E6%88%91%E7%9A%84%E4%B8%80%E4%B8%AA%E9%81%93%E5%A7%91%E6%9C%8B%E5%8F%8B.js',             pic: 'https://www.cnblogs.com/images/cnblogs_com/php-linux/674292/t_109951162818478976.jpg'         },         {             title: '大田后生仔',             author: '王雨萌',             url: 'https://files.cnblogs.com/files/php-linux/%E7%8E%8B%E7%8E%89%E8%90%8C-%E5%A4%A7%E7%94%B0%E5%BE%8C%E7%94%9F%E4%BB%94.js',             pic: 'https://www.cnblogs.com/images/cnblogs_com/php-linux/674292/t_109951164423988553.jpg'         }     ] }); ap.init(); </script>

　　

样式可以自己设置 下面是我的 

 

 

页面定制css 添加代码

?

1 2 3 4 5 6 7 8 9 10 11 12 13

/* 定制公告栏音乐插件的样式 */ .aplayer { font-family: Arial,Helvetica,sans-serif; /*音乐插件字体*/ margin: 0px; /*音乐插件与公告栏左边的边距，0px就是直接抵到公告栏左边的边上*/ box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12); border-radius: 2px; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; line-height: normal; }