博客园添加音乐插件-aplayer
页面定制CSS
/* 定制公告栏音乐插件的样式 */
.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;
}
博客侧边栏公告
<!-- 为博客底部添加音乐组件 -->
<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: false,
theme: '#F5F5F5', <!-- 插件背景颜色,建议和你的公告栏背景色一样,这样融为一体的感觉 -->
preload:'none', <!-- 预加载设置为无 -->
music: [{
title: '音乐1',
author: 'Valentin',
url: 'https://files.cnblogs.com/files/shwee/Valentin-A_Little_Story.pdf',
pic: 'http://images.cnblogs.com/cnblogs_com/shwee/1218109/o_music_pic4.png'
},
{
title: '音乐2',
author: '林海',
url: 'https://files.cnblogs.com/files/shwee/%E6%9E%97%E6%B5%B7-%E7%90%B5%E7%90%B6%E8%AF%AD.pdf',
pic: 'http://images.cnblogs.com/cnblogs_com/shwee/1218109/o_music_pic1.png'
},
]
});
ap.init();
</script>
上传文件
上传文件到博客园,包括图片,和音乐
音乐后缀改为ppt上传,相册图片的链接获取方式除了博主所说,还有就是点开图像,下面有一个查看原图,地址栏就会有图片的链接了
另外上传的文件链接一般都是以下格式,只需要改id和文件名即可
https://blog-static.cnblogs.com/files/你的id/文件名
为什么没有生成播放器呢
以下是我踩的坑:
一:
也许在下面title这个地方歌名带了了单引号导致错误,如下图就是错误例子,应该用\转义',那么改为Who\'s Lovin\' You就一切ok了
{
title: 'Who's Lovin' You',
author: '林海',
url: 'https://files.cnblogs.com/files/shwee/%E6%9E%97%E6%B5%B7-%E7%90%B5%E7%90%B6%E8%AF%AD.pdf',
pic: 'http://images.cnblogs.com/cnblogs_com/shwee/1218109/o_music_pic1.png'
}
二:
生成了播放器,但是播放无声音,换成火狐却又能播放了,这是因为你把音乐文件后缀设为了ppt或pdf,改为css就可以了。
最后
作者:荒
除特别声明为原创博文外,均可转载,也欢迎转载,未经作者同意必须在文章页面给出原文链接,否则保留追究法律责任的权利,谢谢您的配合。