博客园美化——添加Apalyer音乐播放器

本文详细介绍了在博客园中使用Aplayer音乐播放器的方法,包括申请js权限、引入css和js文件、获取音乐及封面外链等步骤,帮助读者轻松为博客添加背景音乐。

前言

这几天申请了博客园的博客,非常顺利便捷。审核大概还不到一个小时,效率是很高的了,赞一个!

之前折腾过GitHub Page+hexo+next,对于我这种前端小白来说真实有点难度,不过最终还是弄了一个蛮漂亮的博客网站,见https://chens.life,欢迎访问!奈何🐕百度对GitHub的收录是真的不好,csdn的广告商业化让人作呕,就试了试博客园。

想给博客加个音乐播放器,还是用著名Aplayer,美观漂亮。可以参考它们的官方中文文档,而我们要做的很简单!

引入css和js

前提是需要申请js权限,大概一个小时就会通过

在页脚HTML代码中加入:

<!-- 为博客底部添加音乐组件 -->
<div id="player"  class="aplayer"></div>
<
喜欢音乐的朋友们,一定非常期望有一款专属于自己博客的“个性音乐播放器”吧…… 最近为wordpress音乐插件 Flash Media player 设计了一款黑白主题皮肤,如下图 效果预览 / 下载地址 Flash Media player是一款专门用于Wordpress、bo-blog等主流博客平台的集成flash+xml+js技术的在线音乐播放器插件。 其功能强大且方便: 1、可播放Mp3和Flv文件; 2、可实时显示播放进度和下载进度; 3、可调节音量; 4、可设置“单曲循环”和“所有循环”播放模式; 5、可选择播放列表; 6、用XML文件配置播放文件列表; 安装方法: 1.将下载的压缩包解压缩。 2.用“记事本”编辑播放器首页:Index.html。找到<h1></h1>标签,将里面的大标题和链接都替换掉。 3.编辑曲目表:playlist.xml。格式如下: <track> <title>音乐名</title> <location>音乐的http地址(注意:音乐质量最好控制在3M以内,1是能保证访客的下载速度,2是节约你的空间和流量。如果你直接到“百度”里“扒”MP3地址,另当别论。)</location> </track> 想再添加一首新歌,只需要循环复制以上内容即可。 4.编辑完曲目表,将整个文件夹上传至网站根目录。 5.直接修改你的wordpress模板,在导航条里加入新链接后,上传即可, (例如:起名叫“音乐”,链接地址为:http://www.ueui.com.cn/mp3) 由于考虑到用户体验,我建议将Flash Media player新开一个页面(_blank)。这样做有这么个好处: 不会因为博客中的日志链接频繁跳转,而导致音乐常常被中断播放。(记得我常常浏览某人的blog,其每篇日志的侧边栏都导入同一个音乐插件。结果是,当我每次新开一篇文章时,就会重新听一遍他博客上第一首歌的前奏……当我看完他的所有日志后,甚至连第一首歌后半段是什么都不知道,可这首歌的前奏背的已经滚瓜烂熟……囧rz。据我所知,按这种方式使用音乐插件的人还不在少数,汗!)
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

通用代码

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值